✨ Installation

$3

``bash
npm install --save react-ui-scrollspy
`

OR

`bash
yarn add react-ui-scrollspy
`

$3

`bash
npm install --save react-ui-scrollspy@2.2.0
`

OR

`bash
yarn add react-ui-scrollspy@2.2.0
`

🎞 Demo

$3

| Demo 1 | Demo 2 |
| :-------------------------------------------- | :--------------------------------------------- |
| !ScrollSpy Demo | !ScrollSpy Demo |

⚙️ Usage

1. In your navigation component

`tsx


2. Wrap the elements you want to spy on in the component.


`tsx
import ScrollSpy from "react-ui-scrollspy";

3. Write styles for when the navigation element which is active in your index.css

`css
.active-scroll-spy {
background-color: yellowgreen;
border-radius: 15px;
}
`

📝 Notes

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 navbar a header consider adding the following CSS

`css
html {
scroll-padding-top: 120px; / height of your navbar /
}
`

- Try using offsets.

- Go through the Props.

- See demo-app for example used here.

💡 Props

$3

| Attributes | Type | Description | Default | Required |
| :--------- | :---------- | :------------------------------------------------- | :------ | :------- |
| children | ReactNode | Each direct child Element should contain an id | - | yes |

$3

| Attributes | Type | Description | Default | Required |
| :------------------------- | :------------------------------------------------ | :------------------------------------------------------------------------------------------------------ | :------ | :------- |
| navContainerRef | MutableRefObject

| ref to your navigation container containing items with data-to-scrollspy-id attributes | - | no |
| parentScrollContainerRef | MutableRefObject

| If you want to spy only on a particular scrollable container (Element) then pass its ref to this prop | - | no |

$3

| 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 |

$3

| 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 |

$3

| 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 |

$3

| 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

##

📝 Authors

- Hussain Pettiwala (@pettiboy)