react-spy-scroll

Scrollspy components for react

How to install

npm install react-spy-scroll --save

How to use it

TODO

The most basic setup

TODO

The default behaviour

The library introduces four components; AnchorLink, AnchorButton, AnchorElement and ScrollPanel. The link and button are simple a and button tags wrapped in the Anchor component for ease of use.

To get startet you only need some AnchorXXXXs and AnchorElements with matching href and id props. If you want a scrolling area within your page, e.g. not a page-scroll, you can wrap your AnhorElements in a ScrollPanel.

AnchorElements have useful defaults by them self, but will inherit configuration from its parent ScrollPanel if one exists. If by change a AnchorElement defines a props which is also present at its parent ScrollPanel then the AnchorElements config will be used.

Anchor

| PropName | PropType | Default | Description | | ------------- | --------------------- | --------------------- | ----------------- | | href | PT.string.isRequired| None | Reference to AnchorElement's id | | onClick | PT.func | None | onClick handler | | activeClass | PT.string | scroll-spy-active | The class given to an Anchor when its AnchorElement is active |

AnchorElement

| PropName | PropType | Default | Description | | ------------- | ------------------------- | ------------- | --------------------------------- | | id | PT.string.isRequired | None | An elements id | | offset | PT.number | None | Scroll offset | | children | PT.element.isRequired | None | React children | | isInside | PT.func | See below | Checking if element is in view |

isInside: (scrollOffset, elemTopBound, elemBottomBound) =>
        (scrollOffset >= elemTopBound && scrollOffset <= elemBottomBound)

ScrollPanel

| PropName | PropType | Default | Description | | ------------- | ------------------------- | ------------- | --------------------------------- | | offset | PT.number | 0 | Scroll offset | | events | PT.object | {} | Callbacks for start/end of scroll | | animate | PT.bool | true | Animated scroll | | tag | PT.string | div | DOM-tag | | className | PT.string | scroll-panel| Classname | | children | PT.arrayOf(PT.element) | None | React-children |

Peer dependencies

This component has the newest react and react-router as peerdependenies, but will most likely work with lower version. If you test the component with lower versions of react and/or react-router please let me know so that the dependencies can be adjusted.

"react": "^0.14.7 || ^15.0.1"
"react-dom": "^0.14.7 || ^15.0.1"