react-scroll-hook
v1.0.0
Published
A simple React hook for listening to the scroll direction of a page. Provides the value as a string of either 'up' or 'down'. Defaults to up but can be configured to have a different default.
Downloads
6
Maintainers
Readme
useScrollDirection
This is a custom React Hook that allows you to track the direction of the user's scroll on a webpage. It provides two directions: up
and down
. The scroll direction is updated only when there is a significant scroll movement (at least 10 pixels).
Installation
This package is distributed via npm. You can add it to your project using:
npm install use-scroll-direction
Or if you're using Yarn:
yarn add use-scroll-direction
Usage
Here's a simple usage example:
import React from "react";
import useScrollDirection from "use-scroll-direction";
const MyComponent = () => {
const scrollDirection = useScrollDirection();
return (
<div>
<p>Current scroll direction: {scrollDirection}</p>
</div>
);
};
export default MyComponent;
By default, the initial direction is set to "up"
. However, you can specify a different initial direction ("up"
or "down"
) if needed:
const scrollDirection = useScrollDirection({ initialDirection: "down" });
API
useScrollDirection({ initialDirection }: { initialDirection?: 'up' | 'down' })
This function is the default export of the use-scroll-direction
package. It accepts an optional configuration object and returns the current scroll direction.
Arguments
initialDirection
(optional): This optional field lets you set the initial scroll direction. It can be either"up"
or"down"
. Defaults to"up"
.
Returns
(string)
: Returns a string representing the current scroll direction, either"up"
or"down"
.
Browser Support
This hook relies on the window.pageYOffset
property which is supported in all modern browsers and Internet Explorer 9+. If you need to support older browsers, you may need to include a polyfill for window.pageYOffset
.
License
MIT