/react-drag-drop-hook

Simple implementation of drag and drop and drop zone with React hooks

Primary LanguageTypeScript

Very simple boilerplate code to show how to create a drag and drop with a exposing hook.

Features:

  • Touch support;
  • Mouse support;
  • Droppable zone;
  • No Packages external packages;
  • Calculates overlap between draggable and droppable

Example code under App.tsx

Consuming example:

  const { translate, isDragging, isDraggableOverllapping, setTranslate } = useDragDrop(draggableRef, droppableRef, {
    onDrop: () => {
      resetToInitalPosition()
    },
  })

Codesandbox example