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.