scroll-spy

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