React Spy

Table of Contents

1. Overview
2. Install
3. Usage
4. Contributing
   • Development
     • Linters
     • Testing
     • Commit Guidelines

Overview

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

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

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'