Package Exports
- @neodrag/react
- @neodrag/react/package.json
Readme
@neodrag/react
One draggable to rule em all
A lightweight React hook to make your elements draggable.
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
npm install @neodrag/react
# yarn
yarn add @neodrag/reactUsage
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:
{
/** Distance of element from original position on x-axis */
offsetX: number,
/** Distance of element from original position on y-axis */
offsetY: number,
/** element.getBoundingClientRect() result */
domRect: DOMRect,
}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