Getting Started

dragdoll-react is distributed as ES modules via subpath exports. Each module has its own entry point so you can import only what you need. That being said, everything is also exported via the root dragdoll-react module to provide a bit better developer experience.

Installation

npm install dragdoll-react

With peer dependencies:

npm install dragdoll-react dragdoll eventti tikki mezr react react-dom

Peer Dependencies

• dragdoll (^1.0.0)
  • Core library for drag and drop functionality. Brings its own peer dependencies (eventti, tikki, mezr) that you will also need to install.
• react (>=18.0.0)
• react-dom (>=18.0.0)

Basic Usage

Here's a simple example of making a draggable element:

import { useRef, useCallback, useMemo } from 'react';
import { usePointerSensor, useDraggable } from 'dragdoll-react';

function DraggableRedBox() {
  const elementRef = useRef<HTMLDivElement | null>(null);
  const [pointerSensor, setPointerSensorElementRef] = usePointerSensor();
  const draggableSettings = useMemo(
    () => ({
      elements: () => (elementRef.current ? [elementRef.current] : []),
    }),
    [],
  );
  const draggable = useDraggable([pointerSensor], draggableSettings);
  const setRefs = useCallback(
    (node: HTMLDivElement | null) => {
      elementRef.current = node;
      setPointerSensorElementRef(node);
    },
    [setPointerSensorElementRef],
  );

  return (
    <div
      ref={setRefs}
      style={{
        position: 'relative',
        width: '100px',
        height: '100px',
        backgroundColor: 'red',
      }}
    />
  );
}