react-dragster/dist/main.js

useDragster is a React hook designed to simplify drag and drop event handling by providing easy-to-use abstractions for drag enter, drag leave, and drop events. It also addresses common browser bugs related to these events, ensuring a smooth and reliable

import { useRef, useEffect } from "react";
const defaultOptions = {
  preventDefault: true,
  stopPropagation: true
};
const useDragster = (props) => {
  const options = Object.assign(defaultOptions, props.options);
  const watcherRef = useRef(null);
  let first = useRef(false);
  let second = useRef(false);
  const dragEnter = (event) => {
    options.preventDefault && event.preventDefault();
    options.stopPropagation && event.stopPropagation();
    if (first.current) {
      second.current = true;
    } else {
      first.current = true;
      props.dragsterEnter && props.dragsterEnter(event);
    }
  };
  const dragLeave = (event) => {
    options.preventDefault && event.preventDefault();
    options.stopPropagation && event.stopPropagation();
    if (second.current) {
      second.current = false;
    } else if (first.current) {
      first.current = false;
    }
    if (!first.current && !second.current) {
      props.dragsterLeave && props.dragsterLeave(event);
    }
  };
  const drop = (event) => {
    options.preventDefault && event.preventDefault();
    options.stopPropagation && event.stopPropagation();
    first.current = false;
    second.current = false;
    props.dragsterDrop && props.dragsterDrop(event);
  };
  useEffect(() => {
    const element = watcherRef.current;
    if (element) {
      element.addEventListener("dragenter", dragEnter);
      return () => {
        element.removeEventListener("dragenter", dragEnter);
      };
    }
  }, [props.dragsterEnter]);
  useEffect(() => {
    const element = watcherRef.current;
    if (element) {
      element.addEventListener("dragleave", dragLeave);
      return () => {
        element.removeEventListener("dragleave", dragLeave);
      };
    }
  }, [props.dragsterLeave]);
  useEffect(() => {
    const element = watcherRef.current;
    if (element) {
      element.addEventListener("drop", drop);
      return () => {
        element.removeEventListener("drop", drop);
      };
    }
  }, [props.dragsterDrop]);
  return watcherRef;
};
export {
  useDragster as default
};