• Simple and versatile stylized scrollbar for React

  • Size 245 byte
  • Vertical and horizontal
  • Stylizing
  • Touchable (soon...)

---

• Demo

• Install

npm i react-scrl

• Usage

import React, {useCallback} from 'react';
import Scrollbar from 'react-scrl';

export default () => {

    /**
     * @param {number} x - Left offset in px
     * @param {number} y - Top offset in px
     * @param {Object} offsets - Offsets in %
     * @param {boolean} isDragging - Is scrolling by mouse drag
     */
    const onScroll = useCallback((e) => {
        console.log(e.x, e.y);
    }, []);

    return (
        /**
         * @param {string} className - Custom class for wrapper
         * @param {Object} defaultOffsets - Default offsets in %
         * @param {number} speed - Speed of scrolling
         * @param {function} onScroll - Event of scrolling
         */
        <Scrollbar className="example" speed={1} defaultOffsets={{x: 0, y: 0}} onScroll={onScroll}>
            <p>So many letters...</p>
        </Scrollbar>
    );

};