@data-driven-forms/dnd is a library providing drag and drop functionality for React components. This custom light-weight library currently supports mouse and touch input, is highly customisable and supports deep nesting of container elements.
npm install --save @data-driven-forms/dnd
or
yarn add @data-driven-forms/dnd
An utility to create an context for dispatch function.
A component handling moving cursor and selecting the correct place to move dragged element.
An utility function to go over all elements' positions stored in state and selecting the correct place.
An utility to stop an event from propagation and default action.
A wrapper providing all neccessary components.
A reducer providing the basic drag and drop functionality.
An utility to create an context for a drag and drop state.
({ id: any }) => { ref, component }
A hook to connect a component to DnD state. Requires an id of the component. Returns a ref and the component object from the state.
({ id?: any, isRoot?: boolean }) => { ref, container, id }
A hook to connect a container to DnD state. Requires an id of the container or a root in case the container is the root container. Returns a ref, id and the container object from the state.
An utility to obtain a dispatch function for the DnD reducer.
({component: string, sourceContainer?: string }) => { onClick, onMouseDown, onTouchStart }
A hook returning handle events for a component handle. Requires an id of the component.
An utility to obtain a state object for the DnD reducer.