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:

1import useSmoothHorizontalScroll from 'use-smooth-horizontal-scroll';

Then, use the hook in your component:

1const { 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.

1<div ref={scrollContainerRef} onScroll={handleScroll}>
2  {/* Your content here */}
3</div>

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

1<button onClick={() => scrollTo(-100)}>Scroll Left</button>
2<button onClick={() => scrollTo(100)}>Scroll Right</button>

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.

1<button disabled={isAtStart} onClick={() => scrollTo(-100)}>Scroll Left</button>
2<button disabled={isAtEnd} onClick={() => scrollTo(100)}>Scroll Right</button>

Full code example

1import { useRef, useState } from "react";
2import useSmoothHorizontalScroll from "use-smooth-horizontal-scroll";
3
4const MyComponent = () => {
5  const { scrollContainerRef, handleScroll, scrollTo, isAtStart, isAtEnd } = useSmoothHorizontalScroll();
6
7  return (
8    <div>
9      <button onClick={() => scrollTo(-100)} disabled={isAtStart}>
10        Scroll Left
11      </button>
12      <div ref={scrollContainerRef} onScroll={handleScroll} style={{ overflowX: "scroll" }}>
13        {/* Your scrolling content here */}
14      </div>
15      <button onClick={() => scrollTo(100)} disabled={isAtEnd}>
16        Scroll Right
17      </button>
18    </div>
19  );
20};

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.