react-scroll-agent v0.8.0

React Scroll Agent

Tiny, 6 KB (pre-gzip) scrollspy component that performantly runs at 60 FPS thanks to requestAnimationFrame and @reach/observe-rect.

Install

npm i --save react-scroll-agent @reach/observe-rect

Example

import ScrollAgent from 'react-scroll-agent';

<ScrollAgent
  nav={({ current, positions }) => (
    <menu>
      <a href="#section-1" className={current === 0 ? 'is-active' : ''}>
        Section 1
      </a>
      <a href="#section-2" className={current === 1 ? 'is-active' : ''}>
        Section 2
      </a>
      <a
        onClick={() => window.scrollTo(0, positions[2])}
        className={current === 2 ? 'is-active' : ''}
      >
        Section 3
      </a>
    </menu>
  )}
  selector="section[data-scrollspy]"
  threshold="center"
>
  <section id="section-1" data-scrollspy>
    <h1>Section 1</h1>
  </section>
  <section id="section-2" data-scrollspy>
    <h1>Section 2</h1>
  </section>
  <section id="section-3" data-scrollspy>
    <h1>Section 3</h1>
  </section>
</ScrollAgent>;

Props

Nav

The nav render prop returns the following items:

<ScrollAgent
  nav={({ current, positions }) => (
    <menu>
      <a href="#section-1" className={current === 0 ? 'is-active' : ''}>Section 1</a>
      <a
        href="#"
        onClick={e => {
          e.preventDefault();
          window.scrollTo(0, positions[1]);
        }}
        className={current === 1 ? 'is-active' : ''}
      >
        Section 2
      </a>
    </menu>
  )}

IIFE & ESM

This module ships with ESM and IIFE versions! To load it just request:

ESM (9 KB unminified)

import ScrollAgent from 'react-scroll-agent/esm';

IIFE (4 KB, for use in tag)

<script src="//unpkg.com/react-scroll-agent/dist/iife.js"></script>

Notes

• If the first item isn’t in view, then current will return -1. This is expected, and allows more flexibility in styling. If you always want the first item to be highlighted, then check that current === 0 || current === -1.
• This component achieves performance by letting you handle all animations. If you need smooth scrolling from your nav, you can easily add another library to handle that using positions.
• requestAnimationFrame won’t fire more than 60FPS, so it’s a perfect native debouncing function for managing scroll events and reflows.
• This component won’t update current or positions unless it actually changes, preventing unnecessary re-renders in React.