Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Purii/react-use-scrollspy

Flexible React Hook to automatically update navigation based on scroll position
https://github.com/Purii/react-use-scrollspy

hooks hooks-api-react javascript react reactjs scrollspy

Last synced: about 1 month ago
JSON representation

Flexible React Hook to automatically update navigation based on scroll position

Awesome Lists containing this project

README

        

# react-use-scrollspy

[![Build Status](https://travis-ci.org/Purii/react-use-scrollspy.svg?branch=master)](https://travis-ci.org/Purii/react-use-scrollspy)
[![npm version](http://img.shields.io/npm/v/react-use-scrollspy.svg?style=flat)](https://www.npmjs.com/package/react-use-scrollspy)
[![npm](https://img.shields.io/npm/dm/react-use-scrollspy.svg)](https://www.npmjs.com/package/react-use-scrollspy)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/Purii/react-use-scrollspy/master/LICENSE)
[![Donate](https://img.shields.io/badge/Donate-Patreon-green.svg)](https://www.patreon.com/purii)

![Example](example.gif)

## Installation

`react-use-scrollspy` is a React `Hook` which requires React **16.8.0 or later.**

```sh
// yarn
yarn add react-use-scrollspy
// or npm
npm i react-use-scrollspy --S
```

## Usage

```javascript
import useScrollSpy from 'react-use-scrollspy';
...
const activeSection = useScrollSpy({
sectionElementRefs: [], // Array of References to DOM elements
});
```

| Parameter | Default | Type | Description |
| :----------------- | :------: | :-----: | ----------------------------------------------------------- |
| defaultValue | `0` | `int` | Default value that is returned (optional) |
| offsetPx | `0` | `int` | Set offset (optional) |
| sectionElementRefs | `[]` | `[Ref]` | Array of Refs to observe (e.g. via React `refs`) |
| scrollingElement | `window` | `Ref` | Target of the scrolling (e.g. via React `refs`)) (optional) |

### with Refs

Use React `refs` for section elements like in the [provided example](/example).

```javascript
import React, { useRef } from 'react';
import useScrollSpy from 'react-use-scrollspy';

const App = () => {

const sectionRefs = [
useRef(null),
useRef(null),
useRef(null),
];

const activeSection = useScrollSpy({
sectionElementRefs: sectionRefs,
offsetPx: -80,
});

return (

Section 1
Section 2
Section 3


Section 1




Section 2




Section 3



)
```