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

``javascript
import Scrollspy from '@cloudpower97/react-spy'

...

...
`

$3

| 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

$3

Fork and clone the repo:

git clone git@github.com: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?

$3

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

`sh
yarn add intersection-observer
`

Then import it in your app:

`js
import 'intersection-observer'
``