npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-scrollspy-navigation

v2.0.6

Published

ScrollSpy React Component - Automatically update navigation components based on scroll position to indicate which link is currently active in the viewport.

Downloads

13,569

Readme

Poster

ScrollSpy React Component

GitHub License npm NPM Downloads Run tests GitHub Repo stars Sponsor

React Component, that automatically update navigation components based on scroll position to indicate which link is currently active in the viewport. It also scrolls (navigation) to viewport when click on a navigation component.

Demo with example code

Sponsor me on GitHub

Sponsor me on PayPal

Table of Contents

How to install

Install via NPM or Yarn package manager

npm i react-scrollspy-navigation
yarn add react-scrollspy-navigation

How to use it

Step 1: Content

Add a unique id to content blocks or heading tags for the elements you want to spy on. There is nothing more to do with the content elements. It's awfully simple so far, right?

// Content blocks
conat ContentWithBoxes = () => {
  return (
    <>
      <section id="target-1">Content here</section>
      <section id="target-2">Content here</section>
      <section id="target-3">Content here</section>
    </>
)};

// Heading tags
conat ContentWithHeaders = () => {
  return (
    <>
      <section>
        <h2 id="target-1">Target 1</h2>
      </section>
      <section>
        <h2 id="target-2">Target 2</h2>
      </section>
      <section>
        <h2 id="target-3">Target 3</h2>
      </section>
    </>
)};

Step 2: Navigation

Wrap your navigation structure with ScrollSpy component. Use only a tags whose href attribute is the hash link of the id of an existing content element. You can use structures of any complexity or depth in the ScrollSpy component, and you can nest multiple ScrollSpy components (although this works, it is not recommended). Don't worry, ScrollSpy won't add any additional structures to the child component.

Note: If you are new to URL hashes, here is some information: https://en.wikipedia.org/wiki/URI_fragment

import ScrollSpy from 'react-scrollspy-navigation';
const Navigation = () => {
  return (
    <ScrollSpy activeClass="nav-active">
      <nav>
        <ul>
          <li>
            <a href="#target-1">...</a>
          </li>
          <li>
            <a href="#target-2">...</a>
          </li>
          <li>
            <a href="#target-3">...</a>
          </li>
        </ul>
      </nav>
    </ScrollSpy>
  );
};

Don't forget to specify in the activeClass prop what className to add to the currently active link. Congratulations, we are done, it was that simple. Continue reading the documentation to find out what options are available to configure how ScrollSpy works.

Note: The much loved Refs used in the previous version and React were thrown away.

Configuration

Optional ScrollSpy props

| Prop | Type | Default | Description | | ---------------- | ------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | activeClass | string | '' | Class name(s) to be applied to the active link | | activeAttr | boolean | false | If true, the active link will have an attribute data-active attached to it. | | offsetTop | number | 0 | Offset the final scroll position from top in pixels. | | offsetLeft | number | 0 | Offset the final scroll position from left in pixels. | | behavior | 'smooth' | 'instant' | 'auto' | 'smooth' | Behavior of the scroll animation. See: Element: scrollTo() | | root | HTMLElement | null | null | Root element for the intersection observer. See: IntersectionObserver: IntersectionObserver() | | rootMargin | string | '0px' | Root margin for the intersection observer. See: IntersectionObserver: IntersectionObserver() | | threshold | number | number[] | [0, 0.25, 0.5, 0.75, 1] | Thresholds for the intersection observer. See: IntersectionObserver: IntersectionObserver() | | onClickEach | function | undefined | Callback function for handle the click event | | onChangeActiveId | function | undefined | Callback function for handle the active element change event |

onClickEach(event, internalClickHandler, container)

  • event: The original click event
  • internalClickHandler: The internal function that scrolls to the element. This should be called at the end of the onClickEach function, as you want the internal click handler to run.
  • container: Container element that is being scrolled. Always try to find the scrollable parent of the linked element.

Example:

const Comp = () => {
  const onClickEach = (e, next, container) => {
    console.log('The clicked element:', e.target);
    console.log('The target container element:', container);
    next();
  };

  return <ScrollSpy onClickEach={onClickEach}>...</ScrollSpy>;
};

onChangeActiveId(currentId, prevId)

  • currentId: The id of the active element
  • prevId: The id of previous active element

Example:

const Comp = () => {
  const onChangeActiveId = (current, prev) => {
    console.log('Active element changed');
    console.log({ current, prev });
  };

  return <ScrollSpy onChangeActiveId={onChangeActiveId}>...</ScrollSpy>;
};

Compatibility

The component depends on the following functions or classes, which define its compatibility.

Example code

Check out the interactive demo and example codes.

Demo with example code

Sponsor me on GitHub

Sponsor me on PayPal

Guidelines

To learn about the guidelines, please read the Code of Conduct, Contributing and Security Policy documents.

License

MIT License @ 2021 Zsolt Tövis

If you found this project interesting, please consider supporting my open source work by sponsoring me on GitHub / sponsoring me on PayPal / give the repo a star.