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 (~0.11.1)
  • Core library for drag and drop functionality.
• eventti (^4.0.3)
  • Used for emitting all the events.
• tikki (^3.0.2)
  • Used for batching DOM operations when necessary (reads and writes).
• mezr (^v1.1.0)
  • Used for calculating tricky DOM bits.
• 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',
      }}
    />
  );
}