# @lancecummings/use-scroll-position > Use scroll position ReactJS hook done right Latest version **1.1.45** (published 2020-02-01) · MIT license · 0 weekly downloads ## Install ```sh npm install @lancecummings/use-scroll-position pnpm add @lancecummings/use-scroll-position yarn add @lancecummings/use-scroll-position bun add @lancecummings/use-scroll-position ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.45 | | Published | 2020-02-01 | | First published | 2020-01-31 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 29.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | n8tb1t | | Maintainers | lancecummings | | Keywords | react, hooks, react-hooks, scroll, scroll-position, use-scroll-position, useScrollPosition | ## Links - npm: https://www.npmjs.com/package/@lancecummings/use-scroll-position - Repository: https://github.com/lancecummings/use-scroll-position - Homepage: https://github.com/lancecummings/use-scroll-position#readme - Issues: https://github.com/lancecummings/use-scroll-position/issues - npm.io page: https://npm.io/package/@lancecummings/use-scroll-position ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.1.45 (latest) — 2020-02-01 - 1.1.44 — 2020-01-31 - 1.1.43 — 2020-01-31 - 1.0.43 — 2020-01-31 ## README # `use-scroll-position` [![Node version](https://img.shields.io/npm/v/@n8tb1t/use-scroll-position.svg?style=flat)](https://www.npmjs.com/package/@n8tb1t/use-scroll-position) [![Node version](https://img.shields.io/npm/dw/@n8tb1t/use-scroll-position)](https://www.npmjs.com/package/@n8tb1t/use-scroll-position) [![Node version](https://img.shields.io/github/license/n8tb1t/use-scroll-position.svg?style=flat)](https://github.com/n8tb1t/use-scroll-position/blob/master/LICENSE) ![Screenshot](https://github.com/n8tb1t/use-scroll-position/raw/master/examples/screenshot.png) `use-scroll-position` is a React [hook](https://reactjs.org/docs/hooks-reference.html) that returns the browser viewport X and Y scroll position. It is highly optimized and using the special technics to avoid unnecessary rerenders! > It uses the default react hooks rendering lifecycle, which allows you to fully control its behavior and prevent unnecessary renders. ## Demo - [Hide navbar on scroll](https://n8tb1t.github.io/use-scroll-position/navbar/navbar) - [Hide/Show sidebar on scroll](https://n8tb1t.github.io/use-scroll-position/navbar/sidebar) - [Display viewport scroll position](https://n8tb1t.github.io/use-scroll-position/navbar/position) [![Edit use-scroll-position](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/use-scroll-position-8nfin?fontsize=14) ## Install ``` yarn add @n8tb1t/use-scroll-position ``` ## Usage ```jsx useScrollPosition(effect,deps, element, useWindow, wait) ``` | Arguments | Description | | --------- | ----------- | `effect` | Effect callback. `deps` | For effects to fire on selected dependencies change. `element` | Get scroll position for a specified element by reference. `useWindow` | Use `window.scroll` instead of `document.body.getBoundingClientRect()` to detect scroll position. `wait` | The `timeout` in ms. Good for performance. > The `useScrollPosition` returns `prevPos` and `currPos`. ## Examples **Log current scroll position** ```jsx import { useScrollPosition } from '@n8tb1t/use-scroll-position' useScrollPosition(({ prevPos, currPos }) => { console.log(currPos.x) console.log(currPos.y) }) ``` **Change state based on scroll position - Inline CSS** ```jsx import React, { useState } from 'react' import { useScrollPosition } from '@n8tb1t/use-scroll-position' const [headerStyle, setHeaderStyle] = useState({ transition: 'all 200ms ease-in' }) useScrollPosition( ({ prevPos, currPos }) => { const isVisible = currPos.y > prevPos.y const shouldBeStyle = { visibility: isVisible ? 'visible' : 'hidden', transition: `all 200ms ${isVisible ? 'ease-in' : 'ease-out'}`, transform: isVisible ? 'none' : 'translate(0, -100%)' } if (JSON.stringify(shouldBeStyle) === JSON.stringify(headerStyle)) return setHeaderStyle(shouldBeStyle) }, [headerStyle] ) const Header =
``` **Change state based on scroll position - Styled Components** ```jsx import React, { useState } from 'react' import { useScrollPosition } from '@n8tb1t/use-scroll-position' const [hideOnScroll, setHideOnScroll] = useState(true) useScrollPosition(({ prevPos, currPos }) => { const isShow = currPos.y > prevPos.y if (isShow !== hideOnScroll) setHideOnScroll(isShow) }, [hideOnScroll]) ``` **Get scroll position for custom element** ```jsx const [elementPosition, setElementPosition] = useState({ x: 20, y: 150 }) const elementRef = useRef() // Element scroll position useScrollPosition( ({ currPos }) => { setElementPosition(currPos) }, [], elementRef ) ``` ## Why to use `use-scroll-position` returns the scroll position of the browser window, using a modern, stable and performant implementation. Most of the time scroll listeners do very expensive work, such as querying dom elements, reading height / width and so on. `use-scroll-position` solves this by using [`throttling`](https://stackoverflow.com/a/44779316) technic to avoid too many reflows (the browser to recalculate everything). --- _Source: https://npm.io/package/@lancecummings/use-scroll-position · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._