npm i react-use-draggable-scroll
App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import { useRef } from "react"; import { useDraggable } from "react-use-draggable-scroll"; export default function MyComponent() { const ref = useRef(); // We will use React useRef hook to reference the wrapping div: const { events } = useDraggable(ref); // Now we pass the reference to the useDraggable hook: return ( <div className="flex max-w-xl space-x-3 overflow-x-scroll scrollbar-hide" {...events} ref={ref} // add reference and events to the wrapping div > <div className="flex-none w-52 h-32 bg-red-200" /> <div className="flex-none w-52 h-32 bg-red-200" /> <div className="flex-none w-52 h-32 bg-red-200" /> <div className="flex-none w-52 h-32 bg-red-200" /> <div className="flex-none w-52 h-32 bg-red-200" /> <div className="flex-none w-52 h-32 bg-red-200" /> <div className="flex-none w-52 h-32 bg-red-200" /> <div className="flex-none w-52 h-32 bg-red-200" /> <div className="flex-none w-52 h-32 bg-red-200" /> </div> ); } |
