react-scrollspy
Scrollspy component
Install
$ npm i react-scrollspy
Usage
... <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="#section-1">section 1</a></li> <li><a href="#section-2">section 2</a></li> <li><a href="#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