React-scroll-marker NPM

react-scroll-marker

Indicate the active section of a page based on scroll position.

Install

You can install react-scroll-marker with NPM or Yarn.

npm install react-scroll-marker --save-exact

yarn add react-scroll-marker --exact

We encourage pinning the version number until react-scroll-marker reaches 1.0.0. We may ship breaking changes in 0.x.x versions.

Usage example

import {
  ScrollMarkerContainer,
  ScrollMarkerLink,
  ScrollMarkerSection
} from "react-scroll-marker";

const Page = () => (
  <ScrollMarkerContainer>
    <nav>
      <ScrollMarkerLink id="overview">
        {({ isActive, onClick }) => (
          <a
            href="/about/#overview"
            onClick={onClick}
            style={{ fontWeight: isActive ? "bold" : "normal" }}
          >
            Overview
          </a>
        )}
      </ScrollMarkerLink>
      <ScrollMarkerLink id="history">
        {({ isActive, onClick }) => (
          <a
            href="/about/#history"
            onClick={onClick}
            style={{ fontWeight: isActive ? "bold" : "normal" }}
          >
            History
          </a>
        )}
      </ScrollMarkerLink>
    </nav>
    <main>
      <ScrollMarkerSection id="overview">
        {({ id }) => (
          <section>
            <h2 id={id}>Overview</h2>
            <p>…</p>
          </section>
        )}
      </ScrollMarkerSection>

      <ScrollMarkerSection id="history">
        {({ id }) => (
          <section>
            <h2 id={id}>History</h2>
            <p>…</p>
          </section>
        )}
      </ScrollMarkerSection>
    </main>
  </ScrollMarkerContainer>
);

API

This package exports three components: ScrollMarkerContainer, ScrollMarkerLink, and ScrollMarkerSection. Here's the documentation for each.

`ScrollMarkerContainer`

The outermost container that wraps the ScrollMarkerLink and ScrollMarkerSection components. This component exists so that the other two components can communicate.

Props

Prop	Type	Description
`children`	`node`, required	The navigation and content on your page. The `children` should include instances of `ScrollMarkerLink` and `ScrollMarkerSection`.

`ScrollMarkerLink`

This component wraps each nav item and tells you whether the nav item is active.

Props

Prop	Type	Description
`children`	`func`, required	This component expects a function as the `children`. The function will receive an object with two properties: `isActive` and `onClick`. `isActive` is a boolean that indicates whether the nav item is currently being viewed. `onClick` is a function that should be passed to the anchor tag. It makes the highlighting more reliable.
`id`	`string`, required	The `id` of the section that corresponds to the nav item. There should be a corresponding `ScrollMarkerSection` with the same `id`.

`ScrollMarkerSection`

This component wraps sections of content on a page. It communicates with ScrollMarkerContainer as users scroll, firing events when a new section comes into view.

Props

Prop	Type	Description
`children`	`func`, required	This component expects a function as the `children`. The function will receive an object with a single `id` property. The `id` should then be passed to a heading in the section. You'll notice that the value of the `id` is the same as the string passed in as the `id` prop. We provide it as a small convenience so that consumers don't need to duplicate it in two places.
`id`	`string`, required	The `id` of the section on the page. There should be a corresponding `ScrollMarkerLink` with the same `id`.