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"