DndProvider

DndProvider is a React component that sets up the Drag and Drop context (DndContext) for its children components.

It provides the necessary state and logic for draggable and droppable components.

Usage

// src/App.tsx
import { DndProvider } from "path/to/DndProvider";
import type { FunctionComponent } from "react";

export const App: FunctionComponent = () => {
  return <DndProvider>{/* Render draggable and droppable components */}</DndProvider>;
};

Props

DndProvider component accepts the following props:

  • Name
    springConfig
    Type
    :WithSpringConfig?
    = {}
    Description

    An optional spring configuration object to be used for animating the dragged item back to its initial position. Default is {}.

  • Name
    activationDelay
    Type
    :number?
    = 0
    Description

    An optional number representing the duration, in milliseconds, of the LongPress gesture before Pan is allowed to activate. If the finger is moved during that period, the gesture will fail. Default is 0.

  • Name
    minDistance
    Type
    :number?
    = 0
    Description

    An optional number representing minimum distance the finger (or multiple finger) need to travel before the gesture activates. Expressed in points.

  • Name
    disabled
    Type
    :boolean?
    = false
    Description

    An optional boolean value to disable the Drag and Drop functionality globally. Default is false.

  • Name
    onActivation
    Type
    :function?
    Description

    A callback function that is called when a draggable item becomes active. Can be used to trigger haptic feedback.

  • Name
    onDragEnd
    Type
    :function?
    Description

    A callback function to be called when a drag event ends. It receives an object with active and over properties representing the active draggable item options and the droppable item options that the draggable item is over, respectively.

  • Name
    onBegin
    Type
    :function?
    Description

    A callback function to be called when a drag event begins. It receives the gesture event and an object with activeId and activeLayout properties representing the active draggable item’s ID and layout, respectively.

  • Name
    onUpdate
    Type
    :function?
    Description

    A callback function to be called when a drag event updates. It receives the gesture event and an object with activeId and activeLayout properties representing the active draggable item’s ID and updated layout, respectively.

  • Name
    onFinalize
    Type
    :function?
    Description

    A callback function to be called when a drag event is finalized. It receives the gesture event and an object with activeId and activeLayout properties representing the active draggable item’s ID and updated layout, respectively.

  • Name
    shouldDropWorklet
    Type
    :worklet function?
    Description

    A worklet callback function to be called on gesture update to determine if the active draggable item can be dropped on a droppable item. It receives the active Rectangle layout and a potentially droppable Rectangle layout

  • Name
    style
    Type
    :StyleProp<ViewStyle>?
    Description

    An optional style object to apply custom styles to the DndProvider component.

  • Name
    children
    Type
    :React.ReactNode?
    Description

    The draggable and droppable components to be rendered within the Drag and Drop context.