Description:

A React hook that allows you to create a drag-gable and scroll-able content functionality in your project very easily by just adding few lines of code.

How can I use it?

First, install the component using NPM.

npm install use-draggable-scroll

2. Or you can install it via Yarn.

yarn add use-draggable-scroll

3. Then, import the hook.

import { useDraggableScroll } from ‘use-draggable-scroll’;

4. Now, write the code to make it functional.

const Component = () => {
const ref = useRef(null);

const { onMouseDown } = useDraggableScroll(ref);

return (
<div ref={ref} onMouseDown={onMouseDown}>
<div>child 1</div>
<div>child 2</div>
<div>child 3</div>
</div>
);
};

Supported optional parameters:

Here is the some drag directions, you can set.

vertical
horizontal
both (This is default option)

const { onMouseDown } = useDraggableScroll(ref, { direction: ‘vertical’ });

The post A React Hook To Create Drag-gable And Scroll-able Content appeared first on Lipku.com.