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