https://github.com/dejorrit/scroll-data-hook

React Hook that returns information about scroll speed, time, distance, direction and more
https://github.com/dejorrit/scroll-data-hook

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/dejorrit/scroll-data-hook
• Owner: dejorrit
• License: mit
• Created: 2019-12-24T08:57:02.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T03:41:43.000Z (almost 2 years ago)
• Last Synced: 2024-09-25T22:54:30.769Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 2.91 MB
• Stars: 142
• Watchers: 5
• Forks: 8
• Open Issues: 42
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `scroll-data-hook`
• awesome-react-hooks-cn - `scroll-data-hook`
• awesome-react-hooks - `scroll-data-hook`
• awesome-react-hooks - `scroll-data-hook`

README

        
# Scroll Data Hook

[![NPM](https://img.shields.io/npm/v/scroll-data-hook.svg)](https://www.npmjs.com/package/scroll-data-hook)

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](https://dejorrit.github.io/scroll-data-hook/).

## Installation

```bash

yarn add scroll-data-hook

```

## Usage

```tsx

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 (

    


      


        {scrolling ? 'Scrolling' : 'Not scrolling'}

      


      


        Scrolling time: {time} milliseconds

      


      


        Horizontal speed: {speed.x} pixels per second

      


      


        Vertical speed: {speed.y} pixels per second

      


      


        Direction: {direction.x} {direction.y}

      


      


        Relative distance: {relativeDistance.x}/{relativeDistance.y}

      


      


        Total distance: {totalDistance.x}/{totalDistance.y}

      

    

  )

};

```


## License

MIT © [dejorrit](https://github.com/dejorrit)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).