rscroll-position
v1.0.9
Published
react-scroll-position returns the browser viewport X and Y scroll position. It is highly optimized ๐ using the special techniques to avoid unnecessary rerenders!
Downloads
7
Maintainers
Readme
rscroll-position
rscroll-position is a react component that returns the browser's x and y viewport position. It is highly optimized :rocket: using the special techniques to avoid unnecessary rerenders!
Install
npm install --save rscroll-position
Usage
| Prop | Description |
| :--- |:--- |
| element | reference to DOM element/node |
| delay | The delay (to throttle events) in ms. |
| useWindow | Use window.scroll if true otherwise document.body.getBoundingClientRect() to detect scroll position. |
| deps | Dependency array |
useScrollPosition()
import { useState, useRef } from 'react';
import { useScrollPosition } from 'rscroll-position';
function App(){
const [ trackPosition, setTrackPosition ] = useScrollPosition (false);
// refference to DOM element
const element = useRef();
useScrollPosition(({previous, current})=> {
console.log({previous, current})
},
element, // element
true, // useWindow
700, // delay ms
[trackPosition] // deps
);
return (
<div ref={element}>
<button
onClick={() => setTrackPosition(prev => !prev)}>
Toggle
</button>
</div>
)
}
License
MIT ยฉ Chitova263