0.1.1 • Published 1 year ago
@1ohooks/use-scroll v0.1.1
@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!