react-use-scroll-position
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

react-use-scroll-position

npm package

A react hook to use scroll position.

Usage

In a React functional component:

import React from 'react';
// Usually you would just need to import one of the following
import { useScrollPosition, useScrollXPosition, useScrollYPosition } from 'react-use-scroll-position';
 
function Example() {
  const { x, y } = useScrollPosition();
  const scrollX = useScrollXPosition();
  const scrollY = useScrollYPosition();
  return (
    <>
      <p>
        {x} should equal to {scrollX}.
      </p>
      <p>
        {y} should equal to {scrollY}.
      </p>
    </>
  );
}

In a custom React hook

import { useScrollPosition } from 'react-use-scroll-position';
 
function useYourImagination() {
  const { x, y } = useScrollPosition();
  return getSomethingAwesomeWith(x, y);
}

Implementation details

The scroll event handler is throttled by requestAnimationFrame.

Install

npm i react-use-scroll-position

DownloadsWeekly Downloads

3,411

Version

2.0.0

License

MIT

Unpacked Size

11.3 kB

Total Files

7

Last publish

Collaborators

  • neoli