Security News
Internet Archive Hacked, 31 Million Record Compromised
The Internet Archive's "Wayback Machine" has been hacked and defaced, with 31 millions records compromised.
@n8tb1t/use-scroll-position
Advanced tools
use-scroll-position
use-scroll-position
is a React hook 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.
yarn add @n8tb1t/use-scroll-position
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
returnsprevPos
andcurrPos
.
Log current scroll position
import { useScrollPosition } from '@n8tb1t/use-scroll-position'
useScrollPosition(({ prevPos, currPos }) => {
console.log(currPos.x)
console.log(currPos.y)
})
Change state based on scroll position
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
const [elementPosition, setElementPosition] = useState({ x: 20, y: 150 })
const elementRef = useRef()
// Element scroll position
useScrollPosition(
({ currPos }) => {
setElementPosition(currPos)
}, [], elementRef
)
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
technic to avoid too many reflows (the browser to recalculate everything).
FAQs
Use scroll position ReactJS hook done right
The npm package @n8tb1t/use-scroll-position receives a total of 18,271 weekly downloads. As such, @n8tb1t/use-scroll-position popularity was classified as popular.
We found that @n8tb1t/use-scroll-position demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The Internet Archive's "Wayback Machine" has been hacked and defaced, with 31 millions records compromised.
Security News
TC39 is meeting in Tokyo this week and they have approved nearly a dozen proposals to advance to the next stages.
Security News
Our threat research team breaks down two malicious npm packages designed to exploit developer trust, steal your data, and destroy data on your machine.