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
-
hapticFeedback
- Type
- :HapticFeedbackTypes?
- Description
-
An optional haptic feedback type to trigger when a draggable item becomes active.
-
- Name
-
onDragEnd
- Type
- :function?
- Description
-
A callback function to be called when a drag event ends. It receives an object with
active
andover
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
andactiveLayout
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
andactiveLayout
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
andactiveLayout
properties representing the active draggable item’s ID and updated layout, respectively.
-
- 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.