React Scroll Espionage
Scrollspy component for React.
Installation and Usage
$ npm i react-scroll-espionage -S# or $ yarn add react-scroll-espionage
// for commonjsconst ScrollEspionage = ; // for es modules;
Getting Started
<ScrollEspionage nav= <menu> <div className=current === 0 ? 'is-active' : '' onClick= window > Section 1 </div> <div className=current === 1 ? 'is-active' : '' onClick= window > Section 2 </div> <div className=current === 2 ? 'is-active' : '' onClick= window > Section 3 </div> </menu> selector="section[data-scrollspy]" threshold=64> <section id="section-1" data-scrollspy> <h1>Section 1</h1> </section> <section id="section-2" data-scrollspy> <h1>Section 2</h1> </section> <section id="section-3" data-scrollspy> <h1>Section 3</h1> </section></ScrollEspionage>
API
Name | Type | Default | Description |
---|---|---|---|
nav |
React.Node |
null |
Render prop that returns current index in view and all positions of items. |
selector |
string |
[data-scrollspy] |
Any CSS selector to specify which elements in children to attach the scrollspy to. |
threshold |
number |
0 |
Trigger point at which current watches. |