QueryBuilderDndProps

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

QueryBuilderDnD props.

Extends

• QueryBuilderContextProviderProps

Properties

addRuleToNewGroups?

optional addRuleToNewGroups?: boolean

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

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

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

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

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

Parameters

Parameter	Type
params	CustomCanDropParams

Returns

boolean

---

children?

optional children?: ReactNode

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

Inherited from

QueryBuilderContextProviderProps.children

---

controlClassnames?

optional controlClassnames?: Partial<Classnames>

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

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

Defines replacement components.

Inherited from

QueryBuilderContextProviderProps.controlElements

---

copyModeAfterHoverMs?

optional copyModeAfterHoverMs?: number

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

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

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

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

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

Enables drag-and-drop features.

Default

false

Inherited from

QueryBuilderContextProviderProps.enableDragAndDrop

---

enableMountQueryChange?

optional enableMountQueryChange?: boolean

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

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

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

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

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

---

listsAsArrays?

optional listsAsArrays?: boolean

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

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

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.

---

resetOnFieldChange?

optional resetOnFieldChange?: boolean

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

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

Reset the value when the operator changes.

Default

false

Inherited from

QueryBuilderContextProviderProps.resetOnOperatorChange

---

showCloneButtons?

optional showCloneButtons?: boolean

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

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

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

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

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

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

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

Default

false

Inherited from

QueryBuilderContextProviderProps.showShiftActions

---

suppressStandardClassnames?

optional suppressStandardClassnames?: boolean

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

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

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

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.