hub / github.com/Purii/react-use-scrollspy

github.com/Purii/react-use-scrollspy @v3.1.1

Chat with this repo

repository ↗ · DeepWiki ↗ · release v3.1.1 ↗ · + Follow

3 symbols 13 edges 7 files 0 documented · 0%

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

react-use-scrollspy

Example

Installation

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

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

Usage

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.

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 (
    <nav className="App-navigation">
      <span className={activeSection === 0 ? "App-navigation-item App-navigation-item--active" : "App-navigation-item"}>Section 1</span>
      <span className={activeSection === 1 ? "App-navigation-item App-navigation-item--active" : "App-navigation-item"}>Section 2</span>
      <span className={activeSection === 2 ? "App-navigation-item App-navigation-item--active" : "App-navigation-item"}>Section 3</span>
    </nav>

    <section className="App-section" ref={sectionRefs[0]}>
      <h1>Section 1</h1>
    </section>
    <section className="App-section" ref={sectionRefs[1]}>
      <h1>Section 2</h1>
    </section>
    <section className="App-section" ref={sectionRefs[2]}>
      <h1>Section 3</h1>
    </section>
  )

Extension points exported contracts — how you extend this code

useScrollSpyParams (Interface)

(no doc)

src/index.ts

Core symbols most depended-on inside this repo

reportWebVitals

called by 1

example/src/reportWebVitals.ts

App

called by 0

example/src/App.tsx

Shape

Function 2

Interface 1

Languages

TypeScript100%

Modules by API surface

src/index.ts1 symbols

example/src/reportWebVitals.ts1 symbols

example/src/App.tsx1 symbols

For agents

$ claude mcp add react-use-scrollspy \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact