https://github.com/vanilla-icecream/react-scroll-espionage
Scrollspy component for React.
https://github.com/vanilla-icecream/react-scroll-espionage
react scrollspy
Last synced: about 2 months ago
JSON representation
Scrollspy component for React.
- Host: GitHub
- URL: https://github.com/vanilla-icecream/react-scroll-espionage
- Owner: Vanilla-IceCream
- License: mit
- Created: 2019-09-21T15:34:40.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2023-01-05T02:06:50.000Z (over 3 years ago)
- Last Synced: 2025-10-12T19:45:11.165Z (9 months ago)
- Topics: react, scrollspy
- Language: JavaScript
- Homepage:
- Size: 557 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Scroll Espionage
Scrollspy component for React.
## Installation and Usage
```bash
$ npm i react-scroll-espionage -S
# or
$ yarn add react-scroll-espionage
```
```js
// for commonjs
const ScrollEspionage = require('react-scroll-espionage');
// for es modules
import ScrollEspionage from 'react-scroll-espionage';
```
## Getting Started
[](https://codesandbox.io/s/react-scroll-espionage-6bw7m?fontsize=14&hidenavigation=1&theme=dark)
```js
(
window.scrollTo(0, positions[0])}
>
Section 1
window.scrollTo(0, positions[1])}
>
Section 2
window.scrollTo(0, positions[2])}
>
Section 3
)}
selector="section[data-scrollspy]"
threshold={64}
>
Section 1
Section 2
Section 3
```
## 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. |