Purii / React Use Scrollspy
Licence: mit
Flexible React Hook to automatically update navigation based on scroll position
Stars: ✭ 133
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Projects that are alternatives of or similar to React Use Scrollspy
Lefthook
Fast and powerful Git hooks manager for any type of projects.
Stars: ✭ 1,848 (+1289.47%)
Mutual labels: hooks
Ajax Hook
🔱 Intercepting browser's AJAX requests which made by XMLHttpRequest.
Stars: ✭ 1,900 (+1328.57%)
Mutual labels: hooks
Use Interval
A custom React Hook that provides a declarative setInterval called useInterval.
Stars: ✭ 127 (-4.51%)
Mutual labels: hooks
Wshook
Easily intercept and modify WebSocket requests and message events.
Stars: ✭ 121 (-9.02%)
Mutual labels: hooks
React Native Music App
React Native Music Application Example
Stars: ✭ 127 (-4.51%)
Mutual labels: hooks
Hooked Form
Performant 2KB React library to manage your forms
Stars: ✭ 110 (-17.29%)
Mutual labels: hooks
Mern Authentication
MERN stack authentication boilerplate: password reset, email verification, server sessions, redux, hooks and docker for dev and prod.
Stars: ✭ 129 (-3.01%)
Mutual labels: hooks
Use Is In Viewport
A react hook to find out if an element is in a given viewport with a simple api.
Stars: ✭ 129 (-3.01%)
Mutual labels: hooks
Git Good Commit
Git hook to help you write good commit messages, with no external dependencies.
Stars: ✭ 128 (-3.76%)
Mutual labels: hooks
Hookish
Hooks in to interesting functions and helps reverse the web app faster.
Stars: ✭ 129 (-3.01%)
Mutual labels: hooks
Use Conditional Effect
React.useEffect, except you can pass a comparison function.
Stars: ✭ 111 (-16.54%)
Mutual labels: hooks
Tipple
A lightweight dependency-free library for fetching data over REST with React.
Stars: ✭ 133 (+0%)
Mutual labels: hooks
react-use-scrollspy
Installation
react-use-scrollyspy 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) |
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>
)
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].