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: 4 months ago
JSON representation

Flexible React Hook to automatically update navigation based on scroll position

• Host: GitHub
• URL: https://github.com/Purii/react-use-scrollspy
• Owner: Purii
• License: mit
• Created: 2018-11-18T12:33:58.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2023-02-27T04:57:11.000Z (almost 2 years ago)
• Last Synced: 2024-06-18T15:30:38.172Z (8 months ago)
• Topics: hooks, hooks-api-react, javascript, react, reactjs, scrollspy
• Language: TypeScript
• Homepage: https://purii.github.io/react-use-scrollspy/
• Size: 3.32 MB
• Stars: 320
• Watchers: 5
• Forks: 16
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `useScrollSpy`
• awesome-react-hooks-cn - `useScrollSpy`
• awesome-react-hooks - `useScrollSpy`
• awesome-react-hooks - `useScrollSpy`

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

    

  )

```