Use scroll with ReactJS hook
npm install @tripair/use-scrolluse-scrolluse-scroll 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 use-scroll
`Usage
`jsx
useScroll(effect, selector, deps, element, wait)
`| Arguments | Description |
| --------- | ----------- |
effect | Effect callback.
selector | Use window instead of selector if selector not set.
deps | For effects to fire on selected dependencies change.
element | Get scroll position for a specified element by reference.
wait | The timeout in ms. Good for performance.> The
useScroll returns prevPos and currPos.Examples
Log current scroll position
`jsx
import { useScroll } from '@n8tb1t/use-scroll-position'
useScroll(({ 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 { useScroll } from 'use-scroll'const [headerStyle, setHeaderStyle] = useState({
transition: 'all 200ms ease-in'
})
useScroll(
({ 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 { useScroll } from 'use-scroll'const [hideOnScroll, setHideOnScroll] = useState(true)
useScroll(({ 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
useScroll(
({ currPos }) => {
setElementPosition(currPos)
}, [], elementRef
)
``