What is DragDoll React?

DragDoll React is a thin and performant React (18+) wrapper for the DragDoll drag and drop library. It provides React hooks that give you access to the full DragDoll API while minimizing re-renders and maintaining excellent performance.

Features

🎯   Thin Wrapper: Minimal overhead, direct access to vanilla DragDoll API.

🚀   High Performance: Optimized with stable references and minimal re-renders.

💪   Type Safe: Full TypeScript support with excellent type inference.

🍦   Vanilla Underneath: Full access to the underlying DragDoll API when you need it.

💝   Free & Open Source: 100% MIT licensed.

Caveats

Being a wrapper over a vanilla JS library often comes with a few caveats, and such is the case with this wrapper also. The container option of the Draggable class is only partially supported because it will make the core library move DOM nodes under a different node for the duration of the drag. React has it's own API (createPortal) for moving DOM nodes around, which is very tricky to support in a wrapper library. Read more about this in the useDraggable docs.