@nfront/use-scroll-position (useScrollPosition)

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.

Install

npm install --save @nfront/use-scroll-position

or:

yarn add @nfront/use-scroll-position

Why to use

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).

How to use

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);
};

Options

• 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.