react-use-scroll-position

A react hook to use scroll position.

Usage

In a React functional component:

importReactfrom'react';// Usually you would just need to import one of the followingimport{useScrollPosition,useScrollXPosition,useScrollYPosition}from'react-use-scroll-position';functionExample(){const{ x, y }=useScrollPosition();constscrollX=useScrollXPosition();constscrollY=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';functionuseYourImagination(){const{ x, y }=useScrollPosition();returngetSomethingAwesomeWith(x,y);}

Implementation details

The scroll event handler is throttled by requestAnimationFrame.