@snapdrag/react/dist/index.d.cts

React hooks for Snapdrag drag and drop library

import * as react_jsx_runtime from 'react/jsx-runtime';
import React from 'react';
import { Kind } from '@snapdrag/core';

declare function Overlay({ style, className }: {
    style?: {} | undefined;
    className?: string | undefined;
}): react_jsx_runtime.JSX.Element;

type DropTargetData = {
    data: any;
    element: HTMLElement;
};
type DraggableConfig = {
    kind: Kind;
    data?: any;
    component?: (args: {
        data: any;
        props: Record<string, any>;
    }) => React.ReactElement;
    placeholder?: (args: {
        data: any;
        props: Record<string, any>;
    }) => React.ReactElement;
    offset?: {
        top: number;
        left: number;
    } | ((args: {
        element: HTMLElement;
        dragStartEvent: MouseEvent;
        data: any;
    }) => {
        top: number;
        left: number;
    });
    mapCoords?: (args: {
        top: number;
        left: number;
        event: MouseEvent;
        dragStartEvent: MouseEvent;
        element: HTMLElement;
        data: any;
    }) => {
        top: number;
        left: number;
    };
    shouldDrag?: (args: {
        event: MouseEvent;
        dragStartEvent: MouseEvent;
        element: HTMLElement;
        data: any;
    }) => boolean;
    onDragStart?: (args: {
        event: MouseEvent;
        dragStartEvent: MouseEvent;
        element: HTMLElement;
        data: any;
    }) => void;
    onDragMove?: (args: {
        top: number;
        left: number;
        event: MouseEvent;
        dragStartEvent: MouseEvent;
        dropTargets: DropTargetData[];
        element: HTMLElement;
        data: any;
    }) => void;
    onDragEnd?: (args: {
        top: number;
        left: number;
        event: MouseEvent;
        dragStartEvent: MouseEvent;
        dropTargets: DropTargetData[];
        element: HTMLElement;
        data: any;
    }) => void;
    move?: boolean;
    disabled?: boolean;
    pointerConfig?: any;
    plugins?: any;
};
type DroppableConfig = {
    disabled?: boolean;
    accepts: Kind | Kind[] | ((props: {
        kind: Kind;
        data: any;
    }) => boolean);
    data?: any;
    onDragIn?: (props: {
        kind: Kind;
        data: any;
        event: MouseEvent;
        element: HTMLElement;
        dropElement: HTMLElement;
        dropTargets: DropTargetData[];
    }) => void;
    onDragOut?: (props: {
        kind: Kind;
        data: any;
        event: MouseEvent;
        element: HTMLElement;
        dropElement: HTMLElement;
        dropTargets: DropTargetData[];
    }) => void;
    onDragMove?: (props: {
        kind: Kind;
        data: any;
        event: MouseEvent;
        element: HTMLElement;
        dropElement: HTMLElement;
        dropTargets: DropTargetData[];
    }) => void;
    onDrop?: (props: {
        kind: Kind;
        data: any;
        event: MouseEvent;
        element: HTMLElement;
        dropElement: HTMLElement;
        dropTargets: DropTargetData[];
    }) => void;
};

declare function useDraggable(config: DraggableConfig): {
    draggable: (child: React.ReactElement<React.ComponentPropsWithRef<any>>) => react_jsx_runtime.JSX.Element | null;
    dragHandle: (component: React.ReactElement<React.ComponentPropsWithRef<any>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
    isDragging: boolean;
    data: any;
};

type HoveredData = {
    kind: Kind;
    data: any;
    element: HTMLElement;
    dropElement: HTMLElement;
};
declare function useDroppable(config: DroppableConfig): {
    droppable: (child: React.ReactElement<React.ComponentPropsWithRef<any>> | null) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
    hovered: HoveredData | null;
};

export { type DraggableConfig, type DroppableConfig, Overlay, useDraggable, useDroppable };