https://github.com/progrmoiz/use-smooth-horizontal-scroll

A custom React hook for smooth horizontal scrolling, including detection for when the user has reached the start or end of the scrollable area. Use it to create a horizontal scroll component similar to the one in YouTube.
https://github.com/progrmoiz/use-smooth-horizontal-scroll

horizontal-scrolling react-hooks smooth-scrolling

Last synced: 4 days ago
JSON representation

A custom React hook for smooth horizontal scrolling, including detection for when the user has reached the start or end of the scrollable area. Use it to create a horizontal scroll component similar to the one in YouTube.

• Host: GitHub
• URL: https://github.com/progrmoiz/use-smooth-horizontal-scroll
• Owner: progrmoiz
• License: mit
• Created: 2023-01-27T02:24:04.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-27T02:59:00.000Z (almost 2 years ago)
• Last Synced: 2024-09-17T14:10:03.596Z (about 2 months ago)
• Topics: horizontal-scrolling, react-hooks, smooth-scrolling
• Language: TypeScript
• Homepage:
• Size: 85 KB
• Stars: 12
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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



  {/* Your content here */}



```


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

```

### Full code example

```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.