React hooks for scrolling the page to any location, or by any amount. Supports smooth scrolling.
npm install react-use-window-scrollRead the official documentation.
This package includes two hooks for scrolling the page to any coordinates, or by any amount. They both use the the Window Web API's scroll functions and support using ScrollToOptions for smooth scrolling implemented natively by the browser.
- useScrollBy - Returns a function to scroll the page up or down by any amount, in pixels. Supports smooth scrolling.
- useScrollTo - Returns a function to scroll the page to any page coordinates, in pixels. Supports smooth scrolling.
Click either of those to see a live demo (at bottom of page).
- ๐ฏ Scroll the page to any pixel coordinates, or by any pixel amount
- Easily send your viewer to any location on the page. Great for scrolling to the top on first render, or smoothly sending to the top when reaching the bottom.
- ๐ Native smooth scrolling support
- Supports browser-native smooth scrolling by specifying ScrollToOptions.
- ๐งฎ Legacy browser support
- Includes polyfill to support browsers that lack native smooth scrolling support (I'm looking at you, Safari!)
- ๐ค Low overhead
- Uses browser-provided Window.scrollTo and Window.scrollBy functions onlyโeven for smooth scrolling.
- ๐ก๏ธ Safely access the Window Web API
- Accessing window haphazardly in React is considered sloppy. These hooks follow the React paradigm of containing side-effects.
If this project helped save you time, please consider buying me a coffee, which powers my development (and life). Your support is much appreciated!
- Documentation
- Overview
- Features include:
- Donate
- Table of Contents
- Installation
- Quick Start
- useScrollBy
- useScrollTo
- TypeScript
- Icon Attribution
- Contributing
- โญ Found It Helpful? Star It!
- License
```
npm i react-use-window-scroll
`jsx
import * as React from "react";
import { useScrollBy } from "react-use-window-scroll";
const HookExample = () => {
const scrollBy = useScrollBy();
return (
Read full useScrollBy docs.
$3
`jsx
import { useScrollTo } from "react-use-window-scroll";const HookExample = () => {
const scrollTo = useScrollTo();
return (
{/ Hard scroll to the top /}
{/ Smooth scroll to the top /}
);
};
``Read full useScrollTo docs.
Type definitions have been included for TypeScript support.
Favicon by Twemoji.
Open source software is awesome and so are you. ๐
Feel free to submit a pull request for bugs or additions, and make sure to update tests as appropriate. If you find a mistake in the docs, send a PR! Even the smallest changes help.
For major changes, open an issue first to discuss what you'd like to change.
If you found this project helpful, let the community know by giving it a star: ๐โญ
Want to support the project? Feel free to grab me a coffee, which is my main source of fuel for development:
See LICENSE.md.