@1ohooks/use-scroll

The @1ohooks/use-scroll package provides a custom React hook for tracking scroll direction and distance in your applications.

Installation

You can install @1ohooks/use-scroll using npm or yarn:

npm install @1ohooks/use-scroll
# or
yarn add @1ohooks/use-scroll

Documentation

useScroll

The useScroll hook allows you to track the scroll direction (up, down, or none) and the distance scrolled.

import { useScroll } from '@1ohooks/use-scroll';

// Usage example
function MyComponent() {
  const { direction, distance } = useScroll();

  if (direction === 'up') {
    // The user is scrolling up
  } else if (direction === 'down') {
    // The user is scrolling down
  } else {
    // No scroll direction (initial state or no scrolling)
  }

  // `distance` contains the distance scrolled

  return (
    // Your component JSX
  );
}

Return Value

• direction (string): The scroll direction, which can be 'up', 'down', or 'none'.
• distance (number): The distance scrolled in pixels.

Requirements

• React 16 or higher.

Usage

You can use the useScroll hook to track the scroll direction and distance in your React components. This can be helpful for implementing scroll-based animations, lazy loading, or other dynamic behaviors.

For more advanced usage and customization options, refer to the hook documentation.

Thank you for using @1ohooks/use-scroll to enhance scroll tracking in your React applications. We hope you find it beneficial!