super easy scroll-spy component for react.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo/src
src
tests
.flowconfig
.gitignore
.npmignore
.travis.yml
CONTRIBUTING.md
README.md
nwb.config.js
package-lock.json
package.json
yarn.lock

README.md

scroll-spy

Travis npm package Coveralls

A super simple scroll-spy component for React.

Usage

Supply the ids of elements you want to monitor while scrolling. The render callback provides the ids of the elements currently in view. Use that to style your navigation bar however you'd like.

import ScrollSpy from 'scroll-spy';

const elementIds = ['a', 'b', 'c']

const ScrollExample = () => (
  <div>
    <ScrollSpy elements={elementIds}>
      {(idsInView) => (
        <nav>
          {elementIds.map(id => (
            <div key={id} style={{ fontWeight: idsInView.includes(id) ? 'bold' : 'normal' }}>
              {id}
            </div>
          ))}
        </nav>
      )}
    </ScrollSpy>
    <main>
    {elementIds.map(id => (
      <div key={id}>{id}</div>
    ))}
    </main>
  </div>
)
Props Type Description
match 'first', 'last', 'all' match either the first, last, or all visible elements. default: all
elements Array An array of ids of elements to monitor.
children (Array, string) => React.Node A render callback containing elements visible.
scrollContainer query string Defaults to window.