Smooth Horizontal Scroll

A small utility hook for adding smooth horizontal scrolling to your React project.

Installation

``
npm install use-smooth-horizontal-scroll
`
or
`
yarn add use-smooth-horizontal-scroll
`

Usage

First, import the hook into your component:

`tsx
import useSmoothHorizontalScroll from 'use-smooth-horizontal-scroll';
`

Then, use the hook in your component:

`tsx
const { scrollContainerRef, handleScroll, scrollTo, isAtStart, isAtEnd } = useSmoothHorizontalScroll();
`

You'll need to pass the scrollContainerRef to the element you want to apply the smooth scrolling to, and attach the handleScroll function to the onScroll event of that element.

`tsx



`

You can use the scrollTo function to scroll to a specific position, or scroll by a specific amount.

`tsx
scrollTo(-100)}>Scroll Left
scrollTo(100)}>Scroll Right
`

You can also check the isAtStart and isAtEnd state to disable buttons for scrolling if the user has reached the start or end of the content.

`tsx
scrollTo(-100)}>Scroll Left
scrollTo(100)}>Scroll Right
`

$3


`tsx
import { useRef, useState } from "react";
import useSmoothHorizontalScroll from "use-smooth-horizontal-scroll";

const MyComponent = () => {
const { scrollContainerRef, handleScroll, scrollTo, isAtStart, isAtEnd } = useSmoothHorizontalScroll();

return (

scrollTo(-100)} disabled={isAtStart}>
Scroll Left

{/ Your scrolling content here /}

scrollTo(100)} disabled={isAtEnd}>
Scroll Right

);
};
``

Compatibility

This package is compatible with React version 16.8 and above.

Similar to

This package is similar to the horizontal scrolling feature on YouTube.

License

This package is open-source and available under the MIT license.