A (P)React hook for attaching drag and drop events to an element.

useDragAndDrop.js

/**
 * Hook for drag attaching drag and drop functionality to a DOM element
 *
 * @param {object} props
 * @param {Function} props.onDragOver The handler that runs when the dragover event is fired.
 * @param {Function} props.onDragExit The handler that runs when the dragexit/dragleave events are fired.
 * @param {Function} props.onDrop The handler that runs when the drop event is fired.
 */
export function useDragAndDrop({ onDragOver, onDragExit, onDrop }) {
  const [element, setElement] = useState(null);

  useEffect(() => {
    if (!element) {
      return;
    }

    const noDragAndDropHandler = (event) => event.preventDefault();

    document.addEventListener('dragover', noDragAndDropHandler);
    document.addEventListener('drop', noDragAndDropHandler);

    element.addEventListener('dragover', onDragOver);
    element.addEventListener('dragexit', onDragExit);
    element.addEventListener('dragleave', onDragExit);
    element.addEventListener('drop', onDrop);

    return () => {
      document.removeEventListener('dragover', noDragAndDropHandler);
      document.removeEventListener('drop', noDragAndDropHandler);

      element.removeEventListener('dragover', onDragOver);
      element.removeEventListener('dragexit', onDragExit);
      element.addEventListener('dragleave', onDragExit);
      element.removeEventListener('drop', onDrop);
    };
  }, [element, onDragOver, onDragExit, onDrop, allowDropOnDocument]);

  return { setElement };
}

The element would be set via setElement in the component consuming the hook. The value passed in to setElement would be a DOM element from a ref.