Skip to content

Customizable Scroll Spy component for react which is Simple, Easy To Use and Lightweight with callback, typescript, auto-update URL hash and throttle support among others.

License

Notifications You must be signed in to change notification settings

pettiboy/react-ui-scrollspy

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

49 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

ScrollSpy Demo

React UI ScrollSpy

npm npm License MIT PRs Welcome

React TypeScript NPM

Make sure you ⭐️ this repository if you find it helpful or interesting :)

✨ Installation

React 18

npm install --save react-ui-scrollspy

OR

yarn add react-ui-scrollspy

React 17 and below

npm install --save [email protected]

OR

🎞 Demo

Try it your self here!

Demo 1 Demo 2
ScrollSpy Demo ScrollSpy Demo

βš™οΈ Usage

  1. In your navigation component
<div>
  <p data-to-scrollspy-id="first">Section 1</p>
  <p data-to-scrollspy-id="second">Section 2</p>
</div>
  1. 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>
  1. Write styles for when the navigation element which is active in your index.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

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

πŸ’‘ Props

πŸ”§ Children

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

πŸ”§ Refs

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

πŸ”§ Throttle

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

πŸ”§ Callback

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

πŸ”§ Offsets

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

πŸ”§ Customize Attributes

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