Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@react-hook/window-scroll

jaredLunde164.8kMIT1.3.0TypeScript support: included

A React hook for updating components when the scroll position of the window on the y-axis changes

react, react hook, hook, react hooks, hooks, window scroll, window scroll hook, scroll position, viewport, viewport scroll, viewport scroll hook, usewindowscroll, use window scroll, react window scroll hook, react scroll position hook, usescrollposition, use scroll position, scroll position hook

readme


useScrollPosition()

Bundlephobia Types NPM Version MIT License

npm i @react-hook/window-scroll

A React hook for updating components when the scroll position of the window on the y-axis changes. This hook throttles updates to the scroll position using useThrottle() at 30fps by default, but this rate is configurable.

Quick Start

Check out the example on CodeSandbox

`jsx harmony import useScrollPosition from '@react-hook/window-scroll'

const Component = (props) => { const scrollY = useScrollPosition(60 /fps/) return

scroll pos: {scrollY}
} `

API

useScrollPosition(fps?: number): number

A hook that performantly updates its scroll position at a constant frame rate.

Arguments

| | Type | Default | Description | | --- | -------- | ------- | ----------------------------------------------------------------------------- | | fps | number | 30 | Defines the rate in frames per second at which the scroll position is updated |

Returns scrollY: number

| | Type | Description | | ------- | -------- | ------------------------------------------------------- | | scrollY | number | The current scroll position of the window on the y-axis |

LICENSE

MIT