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