Package Exports

react-ui-scrollspy

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-ui-scrollspy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React UI ScrollSpy

✨ Installation

npm install --save react-ui-scrollspy

yarn add react-ui-scrollspy

⚙️ Getting started

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

💡 Props

Attributes	Type	Description	Default	Required
`scrollThrottle`	`number`	in `milliseconds` to throttle the `onscroll` event. Lower the number, better the response, higher the performance cost	300	no
`children`	`ReactNode`	-	-	yes
`navContainerRef`	`MutableRefObject<HTMLDivElement \| null>`	`ref` to your navigation container containing items with `data-to-scrollspy-id` attributes	-	no

📝 Authors

Hussain Pettiwala (@pettiboy)