@mirawision/reactive-hooks/use-drag-events.js

A comprehensive collection of 50+ React hooks for state management, UI interactions, device APIs, async operations, drag & drop, audio/speech, and more. Full TypeScript support with SSR safety.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDragEvents = useDragEvents;
const react_1 = require("react");
/**
 * A hook that provides custom drag event handlers for an element.
 * @param ref React ref object for the element
 * @param handlers Object containing drag event handlers
 *
 * @example
 * const ref = useRef(null);
 * useDragEvents(ref, {
 *   onDragStart: (e) => console.log('Drag started'),
 *   onDrop: (e) => {
 *     const data = e.dataTransfer.getData('application/json');
 *     console.log('Dropped:', JSON.parse(data));
 *   }
 * });
 */
function useDragEvents(ref, handlers) {
    (0, react_1.useEffect)(() => {
        const element = ref.current;
        if (!element)
            return;
        const { onDragStart, onDragEnd, onDragOver, onDrop } = handlers;
        // Add event listeners
        if (onDragStart) {
            element.addEventListener('dragstart', onDragStart);
        }
        if (onDragEnd) {
            element.addEventListener('dragend', onDragEnd);
        }
        if (onDragOver) {
            element.addEventListener('dragover', onDragOver);
        }
        if (onDrop) {
            element.addEventListener('drop', onDrop);
        }
        return () => {
            // Remove event listeners
            if (onDragStart) {
                element.removeEventListener('dragstart', onDragStart);
            }
            if (onDragEnd) {
                element.removeEventListener('dragend', onDragEnd);
            }
            if (onDragOver) {
                element.removeEventListener('dragover', onDragOver);
            }
            if (onDrop) {
                element.removeEventListener('drop', onDrop);
            }
        };
    }, [ref, handlers]);
}