Skip to content

React Hook that returns information about scroll speed, time, distance, direction and more

License

Notifications You must be signed in to change notification settings

dejorrit/scroll-data-hook

Repository files navigation

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.

About

React Hook that returns information about scroll speed, time, distance, direction and more

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published