0.1.1 • Published 4 years ago
react-scroll-espionage v0.1.1
React Scroll Espionage
Scrollspy component for React.
Installation and Usage
$ npm i react-scroll-espionage -S
# or
$ yarn add react-scroll-espionage
// for commonjs
const ScrollEspionage = require('react-scroll-espionage');
// for es modules
import ScrollEspionage from 'react-scroll-espionage';
Getting Started
<ScrollEspionage
nav={({ current, positions }) => (
<menu>
<div
className={current === 0 ? 'is-active' : ''}
onClick={() => window.scrollTo(0, positions[0])}
>
Section 1
</div>
<div
className={current === 1 ? 'is-active' : ''}
onClick={() => window.scrollTo(0, positions[1])}
>
Section 2
</div>
<div
className={current === 2 ? 'is-active' : ''}
onClick={() => window.scrollTo(0, positions[2])}
>
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. |