@mirawision/reactive-hooks/use-drag.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.useDrag = useDrag;
const react_1 = require("react");
/**
 * A hook that provides drag functionality for an element.
 * @param ref React ref object for the draggable element
 * @param data Data to transfer during drag operation
 * @returns Object containing drag state
 *
 * @example
 * const ref = useRef(null);
 * const { dragging } = useDrag(ref, { id: 'item-1', type: 'task' });
 *
 * return (
 *   <div ref={ref} style={{ opacity: dragging ? 0.5 : 1 }}>
 *     Draggable Item
 *   </div>
 * );
 */
function useDrag(ref, data) {
    const [dragging, setDragging] = (0, react_1.useState)(false);
    (0, react_1.useEffect)(() => {
        const element = ref.current;
        if (!element)
            return;
        const handleDragStart = (e) => {
            if (data) {
                e.dataTransfer?.setData('application/json', JSON.stringify(data));
            }
            setDragging(true);
        };
        const handleDragEnd = () => {
            setDragging(false);
        };
        // Set draggable attribute
        element.draggable = true;
        // Add event listeners
        element.addEventListener('dragstart', handleDragStart);
        element.addEventListener('dragend', handleDragEnd);
        return () => {
            element.removeEventListener('dragstart', handleDragStart);
            element.removeEventListener('dragend', handleDragEnd);
        };
    }, [ref, data]);
    return { dragging };
}