Rscroll-position NPM

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>
  )
}