Skip to main content
12

Welcome to the journey!

This library provides the component with the missing possibility to scroll it by a mouse. It's easy as cake.

/
$yarn add react-indiana-drag-scroll@next

import { ScrollContainer } from 'react-indiana-drag-scroll';
import 'react-indiana-drag-scroll/dist/style.css'

export const Example = () => {
    return (
      <ScrollContainer>
        {/* scrollable content */}
      </ScrollContainer>
    )
};

Drag Scroll Hook

Also, you can use the hook useDraggableScroll to make an arbitrary element draggable by a mouse.


import { useScrollContainer } from 'react-indiana-drag-scroll';

export const Example = () => {
    const scrollContainer = useScrollContainer(options);
    return (
      <div ref={scrollContainer.ref}>
        {/* scrollable content */}
      </div>
    )
};

But you should notice that you need to hide the scrollbars and set the overflow value by yourself in this case.

Philosophy

This library is intended to be a just the way to give the possibility to scroll a container by a mouse. It doesn't customize the scroll by touch, scrollbars, etc and leaves them native.