@human-tools/use-sortable/dist-types/index.d.ts

Simple implementation that allows you to reorder items easily using useSortable hook.

export interface UseSortableOptions {
    animate?: boolean;
    animationDelayFunction?: (index: number) => number;
    animationDurationFunction?: (index: number) => number;
    animationTimingFunction?: (index: number) => string;
    multiple?: boolean;
    draggingClassNames?: string[];
    dragoverClassNames?: string[];
}
/**
 * Shift array items moving srcIndex before/after targetIndex.
 * TODO: Support multiple adjacent indecies being shifted.
 * TODO: Move this to its own package.
 * @param array The array you want to manipulate
 * @param srcIndex Index of the item that is moving.
 * @param targetIndex Index where the item should be placed.
 * @param insertBeforeTarget Wether the srcItem should be placed before or after the target index.
 * @returns The new array
 */
export declare const shift: <T>(array: T[], srcIndex: number, targetIndex: number, insertBeforeTarget?: boolean) => T[];
/**
 * TODO: Allow user to cancel a reorder while dragging an element
 * by hitting ESC.
 */
export declare const useSortable: <T>(items: T[], options: UseSortableOptions) => {
    orderedItems: T[];
    setItems: (items: T[]) => void;
    setContainerRef: (containerNode: HTMLDivElement | null) => void;
    addDraggableNodeRef: (node: HTMLDivElement) => void;
};