@react-querybuilder/dnd
Components
| Name | Description |
|---|---|
| DragPreviewContext | - |
| InlineCombinatorDnD | The drag-and-drop-enabled inline combinator component. |
| QueryBuilderDnD | Context provider to enable drag-and-drop. If the application already implements react-dnd, use QueryBuilderDndWithoutProvider instead. |
| QueryBuilderDndWithoutProvider | Context provider to enable drag-and-drop. Only use this provider if the application already implements react-dnd, otherwise use QueryBuilderDnD. |
| RuleDnD | Rule component for drag-and-drop. Renders the provided rule component (Rule by default), but forwards the drag-and-drop context. |
| RuleGroupDnD | Rule group component for drag-and-drop. Renders the provided rule group component (RuleGroup by default), but forwards the drag-and-drop context so that child rules and groups will render within the appropriate drag-and-drop wrappers. |
Props
| Name | Description |
|---|---|
| QueryBuilderDndContextProps | QueryBuilderDndContext props. |
| QueryBuilderDndProps | QueryBuilderDnD props. |
| DndProp | Type of the dnd prop on QueryBuilderDnD/QueryBuilderDndWithoutProvider when passing raw react-dnd exports (legacy API). |
UseInlineCombinatorDnDResult
Renames and re-exports AdapterUseInlineCombinatorDnDResult
UseRuleDnDResult
Renames and re-exports AdapterUseRuleDnDResult
UseRuleGroupDnDResult
Renames and re-exports AdapterUseRuleGroupDnDResult
Functions
| Function | Description |
|---|---|
| computeDestinationFromQuadrant | Computes the destination path for a quadrant-based drag target. |
| computeShadowQuery | Computes a shadow query given the current drag state and target position. |
| createFlipAnimator | Creates a FLIP animator that tracks elements matching the given CSS selector within a container. Elements are identified by their data-rule-id or data-testid attribute. |
| getQuadrant | Determines whether the cursor is in the upper quadrant (top 25%), lower quadrant (bottom 25%), or middle zone (center 50%) of an element. |
| isDndAdapter | Type guard to check if a value is a DndAdapter. |
Interfaces
| Interface | Description |
|---|---|
| AdapterUseInlineCombinatorDnDResult | Return type for the adapter's useInlineCombinatorDnD hook. |
| AdapterUseRuleDnDResult | Return type for the adapter's useRuleDnD hook. Matches the existing UseRuleDnD interface from react-querybuilder. |
| AdapterUseRuleGroupDnDResult | Return type for the adapter's useRuleGroupDnD hook. Matches the existing UseRuleGroupDnD interface from react-querybuilder. |
| CustomCanDropParams | Parameters passed to custom canDrop functions. |
| DndAdapterInlineCombinatorDnDParams | Parameters for the adapter's useInlineCombinatorDnD hook. |
| DndAdapterProviderProps | Props for the adapter's DnD context provider component. |
| DndAdapterRuleDnDParams | Parameters for the adapter's useRuleDnD hook. |
| DndAdapterRuleGroupDnDParams | Parameters for the adapter's useRuleGroupDnD hook. |
| FlipAnimator | - |
DnD
| Name | Description |
|---|---|
| DndAdapter | The DnD adapter interface. Implementations of this interface provide drag-and-drop functionality for react-querybuilder using a specific DnD library. |
| DragPreviewContextValue | Context value for the drag preview state during update-while-dragging. |
| DragPreviewState | State provided during an active drag with updateWhileDragging enabled. |
| DragTargetPosition | Parameters describing a drag target position for shadow query computation. |
| DndKitExports | The @dnd-kit/core exports needed by the adapter. |
| OnDragMoveCallback | Callback invoked on each drag position change when updateWhileDragging is enabled. |
| PragmaticDndExports | The @atlaskit/pragmatic-drag-and-drop exports needed by the adapter. |
| createDndKitAdapter | Creates a DndAdapter backed by @dnd-kit/core. |
| createPragmaticDndAdapter | Creates a DndAdapter backed by @atlaskit/pragmatic-drag-and-drop. |
| createReactDnDAdapter | Creates a DndAdapter backed by react-dnd. |
caution
API documentation is generated from the latest commit on the main branch. It may be somewhat inconsistent with official releases of React Query Builder.