react-scroll-hooks v0.1.1

Scrolling

Cross-browser scroll hooks to manage scrolling between react elements.

Features

• Cross Browser
• Scroll Inside Container
• Scroll Entire Document
• Simple Hook Based API
• Efficient

Hooks

• useScroll: A hook to manage the scrolling between elements.
• useScrollSequence: Includes ref management on top of useScroll. Use the createScrollRef function returned by the hook to quickly attach refs to a sequence of elements, then use next, previous and goToPosition methods to scroll between them.

useScroll Hook

The useScroll hook can be used to scroll an entire document or within a container.

Usage

import { useScroll } from 'react-scroll-hooks';

const Component = () => {
    const containerRef = React.useRef();
    const elementRef = React.useRef();
    const scrollSpeed = 50;

    const { scrollToElement, scrollToY } = useScroll({ scrollSpeed, containerRef })

    return (
        <div ref={containerRef} style={{ position: 'relative', overflow: 'scroll' }}>
            <button onClick={() => scrollToElement(elementRef)}
            ...
            <p ref={elementRef}></p>
        </div>
    )
}

Note: The container in which scrolling occurs requires the following CSS properties to work as expected:

position: relative;
overflow: scroll;

Props

The hook takes an object as a parameter with the following properties:

Returns

You can destructure these properties as follows:

const { scrollToElement, scrollToY } = useScroll();

useScrollSequence Hook

The useScrollSequence hook can be used to scroll through a sequence of elements using methods such as next and previous. You can scroll within a container or the entire document.

Usage

import { useScrollSequence } from 'react-scroll-hooks';

const Component = () => {
    const containerRef = React.useRef();

    const { createScrollRef, next, previous, goToPosition, active } = useScrollSequence({
        initialActive: 2,
        verticalOffset: 100,
        scrollSpeed: 50,
        containerRef
    });

    return (
        <div ref={containerRef} style={{ position: 'relative', overflow: 'scroll' }}>
            <button onClick={() => next()}>next</button>
            <button onClick={() => previous()}>previous</button>
            <button onClick={() => goToPosition(2)}>Go To Position 2</button>
            ...
            <p {...createScrollRef()}>Position 0</p>
            <p {...createScrollRef()}>Position 1</p>
            <p {...createScrollRef()}>Position 2</p>
        </div>
    )
}

Note: The container in which scrolling occurs requires the following CSS properties to work as expected:

position: relative;
overflow: scroll;

Props

The hook takes an object as a parameter with the following properties:

Returns

You can destructure these properties as follows:

const { createScrollRef, next, previous, goToPosition, active } = useScrollSequence();