@neodrag/react
One draggable to rule em all
A lightweight React hook to make your elements draggable.
Getting Started
Features
- 🤏 Tiny - Only 1.95KB min+brotli.
- 🐇 Simple - Quite simple to use, and effectively no-config required!
- 🧙♀️ Elegant - React hook, to keep the usage simple, elegant and expressive.
- 🗃️ Highly customizable - Offers tons of options that you can modify to get different behavior.
- ⚛️ Reactive - Change options passed to it on the fly, it will just work 🙂
Installing
pnpm add @neodrag/react
npm install @neodrag/react
yarn add @neodrag/react
Usage
Basic usage
import { useDraggable } from '@neodrag/react';
function App() {
const draggableRef = useRef(null);
useDraggable(draggableRef);
return <div ref={draggableRef}>Hello</div>;
}
With options
import { useDraggable } from '@neodrag/react';
function App() {
const draggableRef = useRef(null);
useDraggable(draggableRef, { axis: 'x', grid: [10, 10] });
return <div ref={draggableRef}>Hello</div>;
}
Defining options elsewhere with typescript
import { useDraggable, type DragOptions } from '@neodrag/react';
function App() {
const draggableRef = useRef(null);
const options: DragOptions = {
axis: 'y',
bounds: 'parent',
};
useDraggable(draggableRef, options);
return <div ref={draggableRef}>Hello</div>;
}
Getting state
import { useDraggable } from '@neodrag/react';
function App() {
const draggableRef = useRef(null);
const { isDragging, dragState } = useDraggable(draggableRef);
useEffect(() => {
console.log({ isDragging, dragState });
}, [isDragging, dragState]);
return <div ref={draggableRef}>Hello</div>;
}
dragState
is of type:
{
offsetX: number,
offsetY: number,
domRect: DOMRect,
}
Read the docs
Credits
Inspired from the amazing react-draggable library, and implements even more features with similar API, but 3.7x smaller.
License
MIT License © Puru Vijay