@supunlakmal/hooks/dist/types/hooks/user-interface-dom/useDrag.d.ts

A collection of reusable React hooks

interface DragOptions {
    /** Data to be transferred during the drag operation. Can be any serializable data. */
    transferData?: any;
    /** The format/type string for the dataTransfer item (e.g., 'text/plain', 'application/json'). Defaults to 'text/plain'. */
    dataFormat?: string;
    /** Effect allowed for the drag operation (e.g., 'copy', 'move', 'link', 'none'). Defaults to 'move'. */
    dragEffect?: 'none' | 'copy' | 'copyLink' | 'copyMove' | 'link' | 'linkMove' | 'move' | 'all' | 'uninitialized';
    /** Element to use as the drag ghost image. If null, browser default is used. */
    dragImage?: HTMLElement | null;
    /** Offset for the drag ghost image relative to the cursor. */
    dragImageOffset?: {
        x: number;
        y: number;
    };
    /** Callback when dragging starts. */
    onDragStart?: (event: DragEvent) => void;
    /** Callback while dragging. */
    onDrag?: (event: DragEvent) => void;
    /** Callback when dragging ends (successfully or cancelled). */
    onDragEnd?: (event: DragEvent) => void;
    /** Set the element itself as draggable (adds `draggable="true"`). Defaults to true. */
    setDraggableAttribute?: boolean;
}
interface DragState {
    /** Whether the element is currently being dragged. */
    isDragging: boolean;
}
/**
 * Provides basic drag-and-drop event handling for an element.
 * Attaches necessary listeners and manages drag state.
 *
 * @param ref React ref object attached to the draggable element.
 * @param options Configuration options for the drag behavior.
 * @returns State indicating if the element is currently being dragged.
 */
export declare const useDrag: <T extends HTMLElement>(ref: React.RefObject<T>, options?: DragOptions) => DragState;
export {};