react-ui-scrollspy
/
2.3.0
react-ui-scrollspy 2.3.0
Install from the command line:
Learn more about npm packages
$ npm install @pettiboy/react-ui-scrollspy@2.3.0
Install via package.json:
"@pettiboy/react-ui-scrollspy": "2.3.0"
About this version
npm install --save react-ui-scrollspyOR
yarn add react-ui-scrollspynpm install --save [email protected]OR
yarn add [email protected]Try it your self here!
| Demo 1 | Demo 2 |
|---|---|
 |
 |
- In your navigation component
<div>
<p data-to-scrollspy-id="first">Section 1</p>
<p data-to-scrollspy-id="second">Section 2</p>
</div>- Wrap the elements you want to spy on in the
<ScrollSpy>component.
import ScrollSpy from "react-ui-scrollspy";
<ScrollSpy>
<div id="first">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut dolores
veritatis doloremque fugit. Soluta aperiam atque inventore deleniti,
voluptatibus non fuga eos magni natus vel, rerum excepturi expedita.
Tempore, vero!
</div>
<div id="second">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut dolores
veritatis doloremque fugit. Soluta aperiam atque inventore deleniti,
voluptatibus non fuga eos magni natus vel, rerum excepturi expedita.
Tempore, vero!
</div>
</ScrollSpy>- Write styles for when the navigation element which is active in your
index.css
.active-scroll-spy {
background-color: yellowgreen;
border-radius: 15px;
}Incase the ScrollSpy is not working the way you expected, you can try the following:
-
Reduce the value of
scrollThrottle. -
If your page contains a
navbaraheaderconsider adding the followingCSS
html {
scroll-padding-top: 120px; /* height of your navbar */
}| Attributes | Type | Description | Default | Required |
|---|---|---|---|---|
children |
ReactNode |
Each direct child Element should contain an id
|
- | yes |
| Attributes | Type | Description | Default | Required |
|---|---|---|---|---|
navContainerRef |
MutableRefObject <HTMLDivElement | null> |
ref to your navigation container containing items with data-to-scrollspy-id attributes |
- | no |
parentScrollContainerRef |
MutableRefObject <HTMLDivElement | null> |
If you want to spy only on a particular scrollable container (Element) then pass its ref to this prop |
- | no |
| Attributes | Type | Description | Default | Required |
|---|---|---|---|---|
scrollThrottle |
number |
In milliseconds to throttle the onscroll event. Lower the number, better the response time, higher the performance cost |
300 |
no |
| Attributes | Type | Description | Default | Required |
|---|---|---|---|---|
onUpdateCallback |
(id: string) => void |
Executes this function whenever you scroll to a new ScrollSpy child Element, callback returns the id of that Element as well |
- | no |
| Attributes | Type | Description | Default | Required |
|---|---|---|---|---|
offsetTop |
number |
Spy will be fired when it has been scrolled offsetTop beyond 50% to the top of the containing element |
0 |
no |
offsetBottom |
number |
Spy will be fired when it has been scrolled offsetBottom beyond 50% to the bottom of the containing element |
0 |
no |
| Attributes | Type | Description | Default | Required |
|---|---|---|---|---|
useDataAttribute |
string |
To customize the string after data-
|
"to-scrollspy-id" |
no |
activeClass |
string |
To customize the class added when the Element in view |
"active-scroll-spy" |
no |
useBoxMethod |
boolean |
Set to false if you want your spy to be active only if more than 50% of that div is in the viewport |
true |
no |
updateHistoryStack |
boolean |
Set to false to disable the URL getting automatically updated when scrolling |
true |
no |
- Hussain Pettiwala (@pettiboy)
