QueryBuilderDndProps

Defined in: dnd/src/types.ts:53

QueryBuilderDnD props.

Extends

• QueryBuilderContextProviderProps

Properties

addRuleToNewGroups?

optional addRuleToNewGroups?: boolean

Defined in: core/src/types/queryBuilder.ts:439

Adds a new default rule automatically to each new group.

Default

false

Inherited from

QueryBuilderContextProviderProps.addRuleToNewGroups

---

autoSelectField?

optional autoSelectField?: boolean

Defined in: core/src/types/queryBuilder.ts:421

Select the first field in the array automatically.

Default

true

Inherited from

QueryBuilderContextProviderProps.autoSelectField

---

autoSelectOperator?

optional autoSelectOperator?: boolean

Defined in: core/src/types/queryBuilder.ts:427

Select the first operator in the array automatically.

Default

true

Inherited from

QueryBuilderContextProviderProps.autoSelectOperator

---

autoSelectValue?

optional autoSelectValue?: boolean

Defined in: core/src/types/queryBuilder.ts:433

Select the first value in the array automatically. Only applicable when the value editor renders a select list.

Default

false

Inherited from

QueryBuilderContextProviderProps.autoSelectValue

---

canDrop?

optional canDrop?: (params: CustomCanDropParams) => boolean

Defined in: dnd/src/types.ts:63

Parameters

Parameter	Type
params	CustomCanDropParams

Returns

boolean

---

children?

optional children?: ReactNode

Defined in: react-querybuilder/src/types/props.ts:846

Inherited from

QueryBuilderContextProviderProps.children

---

controlClassnames?

optional controlClassnames?: Partial<Classnames>

Defined in: react-querybuilder/src/types/props.ts:834

This can be used to assign specific CSS classes to various controls that are rendered by QueryBuilder.

Inherited from

QueryBuilderContextProviderProps.controlClassnames

---

controlElements?

optional controlElements?: Partial<{ actionElement: ComponentType<ActionProps>; addGroupAction: ComponentType<ActionProps> | null; addRuleAction: ComponentType<ActionProps> | null; cloneGroupAction: ComponentType<ActionProps> | null; cloneRuleAction: ComponentType<ActionProps> | null; combinatorSelector: ComponentType<CombinatorSelectorProps> | null; dragHandle: ForwardRefExoticComponent<DragHandleProps & RefAttributes<HTMLElement>> | null; fieldSelector: ComponentType<FieldSelectorProps<{[key: string]: unknown; className?: Classname | undefined; comparator?: string | ((f: { [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string | FlexibleOpt..., operator: string) => boolean); defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: InputType | null | undefined; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<string>[] | (string | FlexibleOption<...>)[] | undefined; placeholder?: string; subproperties?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (s...; validator?: RuleValidator; value: string; valueEditorType?: ValueEditorType | ((operator: string) => ValueEditorType) | undefined; values?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | undefined; valueSources?: ValueSources | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [..., ...(...)[]]); }>> | null; inlineCombinator: ComponentType<InlineCombinatorProps> | null; lockGroupAction: ComponentType<ActionProps> | null; lockRuleAction: ComponentType<ActionProps> | null; matchModeEditor: ComponentType<MatchModeEditorProps> | null; muteGroupAction: ComponentType<ActionProps> | null; muteRuleAction: ComponentType<ActionProps> | null; notToggle: ComponentType<NotToggleProps> | null; operatorSelector: ComponentType<OperatorSelectorProps> | null; removeGroupAction: ComponentType<ActionProps> | null; removeRuleAction: ComponentType<ActionProps> | null; rule: ComponentType<RuleProps<string, string>>; ruleGroup: ComponentType<RuleGroupProps<{[key: string]: unknown; className?: Classname; comparator?: string | ((f: { [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string | FlexibleOpt..., operator: string) => boolean); defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: InputType | null; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: string[] | FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }> | FlexibleOption<string>[] | string | FlexibleOption<string>[]; placeholder?: string; subproperties?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string | FlexibleOpt...>; validator?: RuleValidator; value: string; valueEditorType?: ValueEditorType | ((operator: string) => ValueEditorType); values?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }>; valueSources?: ValueSources | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); }, string>>; ruleGroupBodyElements: ComponentType<RuleGroupProps<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }, string> & UseRuleGroup>; ruleGroupHeaderElements: ComponentType<RuleGroupProps<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }, string> & UseRuleGroup>; shiftActions: ComponentType<ShiftActionsProps> | null; undoRedoActions: ComponentType<UndoRedoActionsProps> | null; valueEditor: ComponentType<ValueEditorProps<{[key: string]: unknown; className?: Classname | undefined; comparator?: string | ((f: { [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string | FlexibleOpt..., operator: string) => boolean); defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: InputType | null | undefined; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<string>[] | (string | FlexibleOption<...>)[] | undefined; placeholder?: string; subproperties?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (s...; validator?: RuleValidator; value: string; valueEditorType?: ValueEditorType | ((operator: string) => ValueEditorType) | undefined; values?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | undefined; valueSources?: ValueSources | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [..., ...(...)[]]); }, string>> | null; valueSelector: ComponentType<ValueSelectorProps<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }>>; valueSourceSelector: ComponentType<ValueSourceSelectorProps> | null; }>

Defined in: react-querybuilder/src/types/props.ts:829

Defines replacement components.

Inherited from

QueryBuilderContextProviderProps.controlElements

---

copyModeAfterHoverMs?

optional copyModeAfterHoverMs?: number

Defined in: dnd/src/types.ts:75

Milliseconds after hovering a drop target before the drop effect automatically switches to "copy". Set to undefined or 0 to disable.

---

copyModeModifierKey?

optional copyModeModifierKey?: string

Defined in: dnd/src/types.ts:70

Key code for the modifier key that puts a drag-and-drop action in "copy" mode. Can be combined with "group" modifier key.

Default

"alt"

---

debugMode?

optional debugMode?: boolean

Defined in: core/src/types/queryBuilder.ts:356

Enables debug logging for query builders (and React DnD when applicable).

Default

false

Inherited from

QueryBuilderContextProviderProps.debugMode

---

dnd?

optional dnd?: DndAdapter | DndProp

Defined in: dnd/src/types.ts:62

A DndAdapter or raw react-dnd exports. When raw react-dnd exports are provided (legacy API), they are automatically wrapped in a react-dnd adapter.

If omitted, the component will asynchronously load react-dnd, react-dnd-html5-backend, and react-dnd-touch-backend. Drag-and-drop features will only be enabled once those packages have loaded.

---

enableDragAndDrop?

optional enableDragAndDrop?: boolean

Defined in: core/src/types/queryBuilder.ts:350

Enables drag-and-drop features.

Default

false

Inherited from

QueryBuilderContextProviderProps.enableDragAndDrop

---

enableMountQueryChange?

optional enableMountQueryChange?: boolean

Defined in: core/src/types/queryBuilder.ts:332

Set to false to avoid calling the onQueryChange callback when the component mounts.

Default

true

Inherited from

QueryBuilderContextProviderProps.enableMountQueryChange

---

groupModeAfterHoverMs?

optional groupModeAfterHoverMs?: number

Defined in: dnd/src/types.ts:87

Milliseconds after hovering a drop target before the drop will automatically create a new group. Set to undefined or 0 to disable.

---

groupModeModifierKey?

optional groupModeModifierKey?: string

Defined in: dnd/src/types.ts:82

Key code for the modifier key that puts a drag-and-drop action in "group" mode. Can be combined with "copy" modifier key.

Default

"ctrl"

---

hideDefaultDragPreview?

optional hideDefaultDragPreview?: boolean

Defined in: dnd/src/types.ts:91

Do not render the "ghost" preview image when dragging.

---

listsAsArrays?

optional listsAsArrays?: boolean

Defined in: core/src/types/queryBuilder.ts:445

Store list-type values as native arrays instead of comma-separated strings.

Default

false

Inherited from

QueryBuilderContextProviderProps.listsAsArrays

---

onDragMove?

optional onDragMove?: OnDragMoveCallback

Defined in: dnd/src/types.ts:107

Callback invoked on each drag position change when updateWhileDragging is enabled. Receives the dragged item, the shadow query representing the prospective layout, and the preview path of the dragged item.

---

onRuleDrop?

optional onRuleDrop?: OnRuleDropCallback

Defined in: dnd/src/types.ts:112

Callback invoked after a drag-and-drop operation completes. Receives info about the dragged item, source/target paths, and drop effect.

---

preserveQueryStateOnUnmount?

optional preserveQueryStateOnUnmount?: boolean

Defined in: core/src/types/queryBuilder.ts:344

By default, when the last QueryBuilder component using a given qbId unmounts, its query is removed from the internal Redux store. Set this to true to retain the query state after unmount, which allows a subsequent QueryBuilder with the same qbId to pick up where the previous one left off.

Only meaningful in conjunction with an explicit qbId prop, since automatically generated qbIds are never reused.

Default

false

Inherited from

QueryBuilderContextProviderProps.preserveQueryStateOnUnmount

---

resetOnFieldChange?

optional resetOnFieldChange?: boolean

Defined in: core/src/types/queryBuilder.ts:409

Reset the operator and value when the field changes.

Default

true

Inherited from

QueryBuilderContextProviderProps.resetOnFieldChange

---

resetOnOperatorChange?

optional resetOnOperatorChange?: boolean

Defined in: core/src/types/queryBuilder.ts:415

Reset the value when the operator changes.

Default

false

Inherited from

QueryBuilderContextProviderProps.resetOnOperatorChange

---

showCloneButtons?

optional showCloneButtons?: boolean

Defined in: core/src/types/queryBuilder.ts:391

Show the "Clone rule" and "Clone group" buttons.

Default

false

Inherited from

QueryBuilderContextProviderProps.showCloneButtons

---

showCombinatorsBetweenRules?

optional showCombinatorsBetweenRules?: boolean

Defined in: core/src/types/queryBuilder.ts:363

Show group combinator selectors in the body of the group, between each child rule/group, instead of in the group header.

Default

false

Inherited from

QueryBuilderContextProviderProps.showCombinatorsBetweenRules

---

showLockButtons?

optional showLockButtons?: boolean

Defined in: core/src/types/queryBuilder.ts:397

Show the "Lock rule" and "Lock group" buttons.

Default

false

Inherited from

QueryBuilderContextProviderProps.showLockButtons

---

showMuteButtons?

optional showMuteButtons?: boolean

Defined in: core/src/types/queryBuilder.ts:403

Show the "Mute rule" and "Mute group" buttons.

Default

false

Inherited from

QueryBuilderContextProviderProps.showMuteButtons

---

showNotToggle?

optional showNotToggle?: boolean

Defined in: core/src/types/queryBuilder.ts:369

Show the "not" (aka inversion) toggle for rule groups.

Default

false

Inherited from

QueryBuilderContextProviderProps.showNotToggle

---

showShiftActions?

optional showShiftActions?: boolean

Defined in: core/src/types/queryBuilder.ts:375

Show the "Shift up"/"Shift down" actions.

Default

false

Inherited from

QueryBuilderContextProviderProps.showShiftActions

---

showUndoRedo?

optional showUndoRedo?: boolean

Defined in: core/src/types/queryBuilder.ts:385

Show the "Undo"/"Redo" actions in the header of the outermost group.

Requires the QueryBuilderHistory component from react-querybuilder/history, which provides the controls and records the history they navigate. Defaults to true when a QueryBuilderHistory ancestor is present (pass false explicitly to opt out).

Default

false

Inherited from

QueryBuilderContextProviderProps.showUndoRedo

---

suppressStandardClassnames?

optional suppressStandardClassnames?: boolean

Defined in: core/src/types/queryBuilder.ts:452

Prevent any assignment of standard classes to elements. This includes conditional and event-based classes for validation, drag-and-drop, etc.

Default

false

Inherited from

QueryBuilderContextProviderProps.suppressStandardClassnames

---

translations?

optional translations?: Partial<Translations>

Defined in: react-querybuilder/src/types/props.ts:839

This can be used to override translatable texts applied to the various controls that are rendered by QueryBuilder.

Inherited from

QueryBuilderContextProviderProps.translations

---

updateWhileDragging?

optional updateWhileDragging?: boolean

Defined in: dnd/src/types.ts:101

Enable visual rearrangement of the query tree during drag. When enabled, rules and groups visually move to their prospective positions as the user drags, instead of only showing a drop indicator line.

onQueryChange is only fired on drop, not during intermediate movements.

Default

false

---

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.