fluid-dnd/dist/react/useDragAndDrop.js

An agnostic drag and drop library to sort all kind of lists. With current support for vue, react and svelte

import { useEffect, useRef } from 'react';
import HandlerPublisher from '../core/HandlerPublisher';
import { dragAndDrop } from '../index';
import { useReactListConfig } from './utils/ReactLilstConfig';
/**
 * Create the parent element of the draggable children and all the drag and drop events and styles.
 *
 * @template T - Type of the items.
 * @param items - List of data to drag and drop.
 * @param config - Configuration of drag and drop tool.
 * @returns The reference of the parent element and function to remove an element.
 */
const handlerPublisher = new HandlerPublisher();
export default function useDragAndDrop(items, config) {
    const parent = useRef(null);
    const [itemsState, setItemsState, listCondig] = useReactListConfig(items, parent);
    const [removeAt, insertAt, onChangeParent] = dragAndDrop(listCondig, handlerPublisher, config, 'data-index');
    useEffect(() => {
        const observer = onChangeParent(parent.current);
        return () => {
            if (observer) {
                observer.disconnect();
            }
        };
    }, [itemsState.length, config]);
    return [parent, itemsState, setItemsState, insertAt, removeAt];
}