scroll-data-hook
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

Scroll Data Hook

NPM

The useScrollData hook returns information about scroll speed, distance, direction and more. Useful when building dynamic navigation bars or doing other scroll related UI updates.

Check out the demo.

Installation

yarn add scroll-data-hook

Usage

import * as React from "react";
import { useScrollData } from "scroll-data-hook";
 
const MyComponent = () => {
  const {
    scrolling,
    time,
    speed,
    direction,
    position,
    relativeDistance,
    totalDistance
  } = useScrollData({
    onScrollStart: () => {
      console.log('Started scrolling);
    },
    onScrollEnd: () => {
      console.log('Finished scrolling);
    }
  });
 
  return (
    <div>
      <p>
        {scrolling ? 'Scrolling' : 'Not scrolling'}
      </p>
 
      <p>
        Scrolling time: {time} milliseconds
      </p>
 
      <p>
        Horizontal speed: {speed.x} pixels per second
      </p>
 
      <p>
        Vertical speed: {speed.y} pixels per second
      </p>
 
      <p>
        Direction: {direction.x} {direction.y}
      </p>
 
      <p>
        Relative distance: {relativeDistance.x}/{relativeDistance.y}
      </p>
 
      <p>
        Total distance: {totalDistance.x}/{totalDistance.y}
      </p>
    </div>
  )
};

License

MIT © dejorrit


This hook is created using create-react-hook.

Readme

Keywords

none

Package Sidebar

Install

npm i scroll-data-hook

Weekly Downloads

680

Version

1.0.4

License

MIT

Unpacked Size

64.7 kB

Total Files

10

Last publish

Collaborators

  • dejorrit