UNPKG

react-dragster

Version:

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

2 lines (1 loc) 1.12 kB
"use strict";const e=require("react"),r={preventDefault:!0,stopPropagation:!0};module.exports=t=>{const n=Object.assign(r,t.options),a=e.useRef(null);let s=e.useRef(!1),o=e.useRef(!1);const u=e=>{n.preventDefault&&e.preventDefault(),n.stopPropagation&&e.stopPropagation(),s.current?o.current=!0:(s.current=!0,t.dragsterEnter&&t.dragsterEnter(e))},p=e=>{n.preventDefault&&e.preventDefault(),n.stopPropagation&&e.stopPropagation(),o.current?o.current=!1:s.current&&(s.current=!1),s.current||o.current||t.dragsterLeave&&t.dragsterLeave(e)},c=e=>{n.preventDefault&&e.preventDefault(),n.stopPropagation&&e.stopPropagation(),s.current=!1,o.current=!1,t.dragsterDrop&&t.dragsterDrop(e)};return e.useEffect((()=>{const e=a.current;if(e)return e.addEventListener("dragenter",u),()=>{e.removeEventListener("dragenter",u)}}),[t.dragsterEnter]),e.useEffect((()=>{const e=a.current;if(e)return e.addEventListener("dragleave",p),()=>{e.removeEventListener("dragleave",p)}}),[t.dragsterLeave]),e.useEffect((()=>{const e=a.current;if(e)return e.addEventListener("drop",c),()=>{e.removeEventListener("drop",c)}}),[t.dragsterDrop]),a};