react-scrollspy
Scrollspy component
Install
$ npm i react-scrollspy
Usage
import Scrollspy from 'react-scrollspy'
...
<div>
<div>
<section id="section-1">section 1</section>
<section id="section-2">section 2</section>
<section id="section-3">section 3</section>
</div>
<Scrollspy items={ ['section-1', 'section-2', 'section-3'] } currentClassName="is-current">
<li><a href="https://www.npmjs.com/package/react-scrollspy#section-1">section 1</a></li>
<li><a href="https://www.npmjs.com/package/react-scrollspy#section-2">section 2</a></li>
<li><a href="https://www.npmjs.com/package/react-scrollspy#section-3">section 3</a></li>
</Scrollspy>
</div>
Props
items={ Array }
Id list of target contents.
currentClassName={ String }
Class name that apply to the navigation element paired with the content element in viewport.
scrolledPastClassName={ String }
Class name that apply to the navigation elements that have been scrolled past [optional].
componentTag={ String | React element type }
HTML tag or React Component type for Scrollspy component if you want to use something other than ul [optional].
style={ Object }
Style attribute to be passed to the generated <ul/> element [optional].
offset={ Number }
Offset value that adjusts to determine the elements are in the viewport [optional].
rootEl={ String }
Name of the element of scrollable container that can be used with querySelector [optional].
onUpdate={ Function }
Function to be executed when the active item has been updated [optional].
Methods
offEvent
Remove event listener of scrollspy.
onEvent
Add event listener of scrollspy.
Development
$ git clone https://github.com/makotot/react-scrollspy.git
$ cd react-scrollspy
$ npm i
$ npm run start
Contributing
Pull requests and reporting an issue are always welcome :)
License
MIT