QueryBuilderDndProps

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

QueryBuilderDnD props.

Extends

• QueryBuilderContextProviderProps

Properties

addRuleToNewGroups?

optional addRuleToNewGroups?: boolean

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

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:385

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:391

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:397

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:67

Parameters

Parameter	Type
params	CustomCanDropParams

Returns

boolean

---

children?

optional children?: ReactNode

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

Inherited from

QueryBuilderContextProviderProps.children

---

controlClassnames?

optional controlClassnames?: Partial<Classnames>

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

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 | ValueSourceFlexibleOptions | ((operator: string) => ValueSources | ValueSourceFlexibleOptions) | undefined; }>> | 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 | ValueSourceFlexibleOptions | ((operator: string) => ValueSources | ValueSourceFlexibleOptions); }, 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; 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 | ValueSourceFlexibleOptions | ((operator: string) => ValueSources | ValueSourceFlexibleOptions) | undefined; }, 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:750

Defines replacement components.

Inherited from

QueryBuilderContextProviderProps.controlElements

---

copyModeAfterHoverMs?

optional copyModeAfterHoverMs?: number

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

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:74

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:330

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:66

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:324

Enables drag-and-drop features.

Default

false

Inherited from

QueryBuilderContextProviderProps.enableDragAndDrop

---

enableMountQueryChange?

optional enableMountQueryChange?: boolean

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

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:91

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:86

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:95

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

---

listsAsArrays?

optional listsAsArrays?: boolean

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

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:111

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:116

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

---

resetOnFieldChange?

optional resetOnFieldChange?: boolean

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

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:379

Reset the value when the operator changes.

Default

false

Inherited from

QueryBuilderContextProviderProps.resetOnOperatorChange

---

showCloneButtons?

optional showCloneButtons?: boolean

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

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:337

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:361

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:367

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:343

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:349

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

Default

false

Inherited from

QueryBuilderContextProviderProps.showShiftActions

---

suppressStandardClassnames?

optional suppressStandardClassnames?: boolean

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

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:760

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:105

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.