react-drag-drop

React library for Drag & Drag events using both desktop (mouse) and mobile (touch) dragging.

Features

Context & hooks based - DragProvider, useDrag & useDrop, etc Drag object handling - pass an object for dropping later Drop state updater function - use the provided events and tell the provider how to update your state

Getting started

install to project npm install @feint/reactdnd

useDrag(ref) call useDrag, returns:

• dragStart(e, dragObject) - eventhandler [mouse & touch], takes the event & dragObject (see below)
• touchMove - eventhandler [touch]
• touchEnd - eventhandler [touch]

useDrop(ref, dropStateUpdate), returns:

• handleDragover - ?
• handleDrop - ?

useDraggingObject(), returns the drag object

dragObject - JS object for data being dragged. Available when handling drop. Useful for writing the dropStateUpdate function.

dropStateUpdate function - used to update your state on the drop event for the compontent defined compontent. Set the dragObject in the dragStart event to determine this function and pass to useDrop.

Mobile dropping into another element

useTouchDragWatcher

By default, the touch drag will just move the element around the page and remove the dragObject on the drop event.

If dragging an element into another element via touch, the provider needs to measure mouse position on the parent component. To do this get the handleTouchmove event from the useTouchDragWatcher hook and add it to the parent element on toucn move event. const touchDragWatcher = useTouchDragWatcher(); <main onTouchMove={touchDragWatcher}>

Notes to me:

• How to create hooks & components for disribution via npm
• How to set-up a module
  • Module needs an entry point, which export many named functions
  • Setting up the package.json
• Modules cannot provide JSX for react modules
  • JSX is just a syntax ontop of React.createElement that CRA handles