useScrollPosition is a React hook that returns the browser window's X and Y scroll position.
This package uses a modern and stable Observable implementation.
npm install --save @nfront/use-scroll-position
or:
yarn add @nfront/use-scroll-position
use-scroll-position returns the scroll position of the browser window, using a modern, stable and performant implementation.
Unlike other packages with similar purpose, this package relies on the robust and modern reactive library RxJS.
This hook only updates state when a scroll event happens, and does so at the interval specifified with the throttle variable (see below).
Syntax:
const scrollPosition = useScrollPosition( throttle );Full example of using the hook in a React component:
import useScrollPosition from 'use-scroll-position';
const MyComponent = props => {
const scrollPosition = useScrollPosition(100);
console.log(scrollPosition);
};throttle: (integer) Pass in the ms value you want the scroll-checker to throttle for. For instance, if you pass in 1000, the hook will only produce scroll values every 1 seconds. We recommend 100 for normal usage, which will produce scroll values every 100th millisecond.