0.0.2 • Published 4 years ago
react-use-is-scrolling v0.0.2
react-use-is-scrolling
A simple React hook to track whether or not the window is currently being scrolled.
const ScrollIndicator:React.FunctionComponent = () => {
const { isScrolling } = useIsScrolling()
return (
<div>{isScrolling ? "scrolling" : "stopped"}</div>
)
}
Note - This is not a hook to track the current scroll position. For that, you can check out libraries like react-use-scroll-position
.
There are some other properties that can be used to track
const {
isScrolling, // boolean, true if currently scrolling
isScrollingX, // boolean, true if scrolling horizontally
isScrollingY, // boolean, true if scrolling vertically
scrollDirectionX, // 'none', 'left', 'right'
scrollDirectionY, // 'none', 'up', 'down'
} = useIsScrolling()
Usage
Install the Library
yarn add react-use-is-scrolling
or
npm install react-use-is-scrolling
Use the Hook
import { useIsScrolling } from 'react-use-is-scrolling'
const ScrollIndicator:React.FunctionComponent = () => {
const { isScrollingX, isScrollingY, scrollDirectionX, scrollDirectionY } = useIsScrolling()
return (
<>
{isScrollingX && (<div>Scrolling: {scrollDirectionX}</div>)}
{isScrollingY && (<div>Scrolling: {scrollDirectionY}</div>)}
</>
)
}