useDragAndDrop

Handle draggable items, targets, and reordering.

useDragAndDrop.tsx

import { useDragAndDrop } from "@cermuel/hooks/react";export function useDragAndDropExample() {  const drag = useDragAndDrop(['a', 'b']);  return <p>{drag.items.join(', ')}</p>;}

Props

Param

Type

Default Value

initialItems

T[]

Returns

{ items: T[]; setItems: import("react").Dispatch<import("react").SetStateAction<T[]>>; draggingIndex: number | null; setDraggingIndex: import("react").Dispatch<import("react").SetStateAction<number | null>>; move: (from: number, to: number) => void; getDraggableProps: (index: number) => { draggable: boolean; onDragStart: () => void; }; getDropProps: (index: number) => { onDragOver: (event: React.DragEvent) => void; onDrop: () => void; }; }