2.0.4 • Published 1 month ago
@neodrag/react v2.0.4
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/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:
{
/** 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,
}
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
2.0.4
1 month ago
2.0.0-next.6
1 year ago
2.0.0-next.4
1 year ago
2.0.0-next.5
1 year ago
2.0.3
1 year ago
2.0.2
1 year ago
2.0.0-next.2
1 year ago
2.0.0-next.3
1 year ago
2.0.0-next.0
1 year ago
2.0.0-next.1
1 year ago
2.0.1
1 year ago
2.0.0
1 year ago
1.0.1
2 years ago
1.0.0
2 years ago
0.2.1
2 years ago
0.2.0
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0
2 years ago