Skip to content

A simple React Scrollspy component built with MutationObserver and IntersectionObserver

License

Notifications You must be signed in to change notification settings

CloudPower97/react-spy

Repository files navigation

React Spy

GitHub contributors made-for-react code style: prettier License: MIT GitHub release

Table of Contents

  1. Overview
  2. Install
  3. Usage
  4. Contributing

Overview

React Spy

React Spy is a modern and efficient Scrollspy component for all of your needs!

React Spy is highly inspired by react-scrollspy.

The difference here is that React Spy does make internally uses of the Mutation Observer to detect changes to the DOM and the Intersection Observer API to know exactly when an element enters or leaves the viewport.

You also want to add the intersection-observer polyfill for full browser support. Check out adding the polyfill for details about how you can include it.


Install

npm i @cloudpower97/react-spy

or

yarn add @cloudpower97/react-spy


Usage

import Scrollspy from '@cloudpower97/react-spy'

<header>
  <nav>
    <Scrollspy items={['section-1', 'section-2', 'section-3']}
      activeClass='current'
      options={{
        rootMargin: '56px 0px 0px 0px',
        threshold: 0.5,
      }}
      intersectionRatio={0.375}>
      <ul>
        <li>
          <a href="#section-1">section 1</a>
        </li>
        <li>
          <a href="#section-2">section 2</a>
        </li>
        <li>
          <a href="#section-3">section 3</a>
        </li>
      </ul>
    </Scrollspy>
  </nav>
</header>

...

<main>
    <section id="section-1">section 1</section>
    <section id="section-2">section 2</section>
    <section id="section-3">section 3</section>
</main>

...

Props

property propType required default description
items array true [] Id list of target contents.
activeClass string true 'active' Class name to toggle when one of the items enters the viewport.
intersectionRatio number true 0.5 A number between 0.0 and 1.0 which indicates how much of the target element is actually visible within the root's intersection rectangle.
options object true { rootMargin: '0px 0px 0px 0px', threshold: 0 } Intersection observer options

Contributing

Yes please!

Pull requests and reporting an issue are always welcome :D

Development

Fork and clone the repo:

git clone [email protected]:your-username/react-spy.git

Create a branch for the feature/fix:

git checkout -b feat:new-great-idea

Add tests and make them pass:

npm run test

or

yarn test

Push to your fork and submit a pull request.

Linters

Prettier ESLint

To enforce a consistent style across the entire project we are using Prettier.

We are also using ESLint to catch bugs and syntax errors during development.

We run Prettier and ESLint before each commit thanks to Husky, so that you can focus on what matter the most : writing code.

Please, note that you will not be able to commit/push any changes you made if your code doesn't pass any of the linting stage described above.

In that case check your git-log and fix any problem reported there.

Also note that by default ESLint will try to fix any problems it can fix by itself.

It will bother you only for changes it can't fix.

All of the above assure us that our code base is always consistent with the rules we are using and bug free as much as possible.

Testing

Jest

We are using Jest and Enzyme to test our components.

Commit Guidelines

We follow the Angular Commit Guidelines.

Refer to their documentation for more information.

Note: If you DON'T follow the Angular Commit Guidelines you will not be able to commit your changes.


Intersection Observer

Intersection Observer is the API used to determine if an element is inside the viewport or not.

Can i use intersectionobserver?

Polyfill

You can import the polyfill directly or use a service like polyfill.io to add it when needed.

yarn add intersection-observer

Then import it in your app:

import 'intersection-observer'

About

A simple React Scrollspy component built with MutationObserver and IntersectionObserver

Resources

License

Stars

Watchers

Forks

Packages

No packages published