use-scroller

A lightweight library that enables smooth scrolling for HTML elements using simple React hooks provided by the package. This library offers additional scrolling features and provides several callback functions for customizable scroll operations.

Installation

1#YARN
2yarn add use-scroller
3
4#NPM
5npm install use-scroller
6
7#PNPM
8pnpm install use-scroller
9

Usage

Scroll state

1import { useScroll } from 'use-scroller'
2
3export default function ScrollStateExample() {
4  const { ref, state } = useScroll<HTMLDivElement>()
5
6  return (
7    <>
8      <p>Scroll State:</p>
9      <pre>{JSON.stringify(state, null, 2)}</pre>
10      <div ref={ref} style={{ height: '200px', overflowY: 'scroll' }}>
11        {/* Your content */}
12      </div>
13    </>
14  )
15}

Carousel

1import { useScroll } from 'use-scroller'
2
3export default function CarouselExample() {
4  const { ref, scrollLeft, scrollRight } = useScroll<HTMLDivElement>()
5
6  return (
7    <>
8      <button onClick={() => scrollLeft()}>Scroll Left</button>
9      <button onClick={() => scrollRight()}>Scroll Right</button>
10
11      <div ref={ref} style={{ width: '400px', overflowX: 'scroll' }}>
12        {/* Your carousel content */}
13      </div>
14    </>
15  )
16}

Box

1import { useScroll } from 'use-scroller'
2
3export default function BoxExample() {
4  const { ref, scrollLeft, scrollRight, scrollTop, scrollBottom, scrollToCenter } =
5    useScroll<HTMLDivElement>()
6
7  return (
8    <>
9      <button onClick={() => scrollToCenter()}>Scroll to Center</button>
10      <button onClick={() => scrollLeft()}>Scroll Left</button>
11      <button onClick={() => scrollRight()}>Scroll Right</button>
12      <button onClick={() => scrollTop()}>Scroll to Top</button>
13      <button onClick={() => scrollBottom()}>Scroll to Bottom</button>
14      <div ref={ref} style={{ width: '300px', height: '300px', overflow: 'scroll' }}>
15        {/* Your content */}
16      </div>
17    </>
18  )
19}

Scroll to target

1import { useWindowScroll } from 'use-scroller'
2
3export default function ScrollToTargetExample() {
4  const { scrollToTarget } = useWindowScroll()
5  const ref1 = useRef(null)
6  const ref2 = useRef(null)
7  const ref3 = useRef(null)
8
9  return (
10    <>
11      <button onClick={() => scrollToTarget(ref1)}>Scroll to Target 1</button>
12      <button onClick={() => scrollToTarget(ref2)}>Scroll to Target 2</button>
13      <button onClick={() => scrollToTarget(ref3)}>Scroll to Target 3</button>
14
15      <div>
16        <div ref={ref1} style={{ height: '400px', backgroundColor: 'lightcoral' }}>
17          Target 1
18        </div>
19        <div ref={ref2} style={{ height: '400px', backgroundColor: 'lightseagreen' }}>
20          Target 2
21        </div>
22        <div ref={ref3} style={{ height: '400px', backgroundColor: 'lightsalmon' }}>
23          Target 3
24        </div>
25      </div>
26    </>
27  )
28}

API Documentation

Available Hooks

useScroll

This hook is designed to handle element scroll events, enabling smooth scrolling for specified HTML elements.

Options

• direction (Type: horizontal or vertical, Default: vertical): Specifies the desired scroll direction. You can set it to horizontal or vertical based on your needs.

• duration (Type: number, Default: 300): Sets the animation duration for scrolling. Adjust this value to control the speed of the scroll animation.

• easingOption (Type: EasingOptions, Default: ease-in-out): Determines the type of animation to use for scrolling. You can choose from various easing options such as ease-in, ease-out, ease-in-out, etc., to customize the scroll animation's behavior.

useWindowScroll

This hook is tailored to handle window scroll events, making it easy to manage scrolling operations within the entire window.

Options

• duration (Type: number, Default: 300): Specifies the animation duration for scrolling operations. Adjust this value to control the speed of the scroll animation.

• easingOption (Type: EasingOptions, Default: ease-in-out): Defines the type of animation to use for scrolling within the window. You can choose from various easing options to customize the scroll animation's behavior.

Feel free to update and expand this documentation further based on your library's features and usage patterns.