QueryBuilderDndProps

Defined in: packages/dnd/src/types.ts:50

QueryBuilderDnD props.

Extends

• QueryBuilderContextProviderProps

Properties

addRuleToNewGroups?

optional addRuleToNewGroups: boolean

Defined in: packages/core/src/types/queryBuilder.ts:389

Adds a new default rule automatically to each new group.

Default

false

Inherited from

QueryBuilderContextProviderProps.addRuleToNewGroups

---

autoSelectField?

optional autoSelectField: boolean

Defined in: packages/core/src/types/queryBuilder.ts:371

Select the first field in the array automatically.

Default

true

Inherited from

QueryBuilderContextProviderProps.autoSelectField

---

autoSelectOperator?

optional autoSelectOperator: boolean

Defined in: packages/core/src/types/queryBuilder.ts:377

Select the first operator in the array automatically.

Default

true

Inherited from

QueryBuilderContextProviderProps.autoSelectOperator

---

autoSelectValue?

optional autoSelectValue: boolean

Defined in: packages/core/src/types/queryBuilder.ts:383

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: packages/dnd/src/types.ts:59

Parameters

Parameter	Type
params	CustomCanDropParams

Returns

boolean

---

children?

optional children: ReactNode

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

Inherited from

QueryBuilderContextProviderProps.children

---

controlClassnames?

optional controlClassnames: Partial<Classnames>

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

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?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | 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?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | 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?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | 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?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | 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?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }> | 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?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | 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?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | 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?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | 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?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | 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: packages/react-querybuilder/src/types/props.ts:744

Defines replacement components.

Inherited from

QueryBuilderContextProviderProps.controlElements

---

copyModeModifierKey?

optional copyModeModifierKey: string

Defined in: packages/dnd/src/types.ts:66

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: packages/core/src/types/queryBuilder.ts:316

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

Default

false

Inherited from

QueryBuilderContextProviderProps.debugMode

---

dnd?

optional dnd: DndProp

Defined in: packages/dnd/src/types.ts:58

Provide this prop if enableDragAndDrop is true for the child element and you want the component to render immediately with drag-and-drop enabled. Otherwise, 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: packages/core/src/types/queryBuilder.ts:310

Enables drag-and-drop features.

Default

false

Inherited from

QueryBuilderContextProviderProps.enableDragAndDrop

---

enableMountQueryChange?

optional enableMountQueryChange: boolean

Defined in: packages/core/src/types/queryBuilder.ts:304

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

Default

true

Inherited from

QueryBuilderContextProviderProps.enableMountQueryChange

---

groupModeModifierKey?

optional groupModeModifierKey: string

Defined in: packages/dnd/src/types.ts:73

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: packages/dnd/src/types.ts:77

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

---

listsAsArrays?

optional listsAsArrays: boolean

Defined in: packages/core/src/types/queryBuilder.ts:395

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

Default

false

Inherited from

QueryBuilderContextProviderProps.listsAsArrays

---

resetOnFieldChange?

optional resetOnFieldChange: boolean

Defined in: packages/core/src/types/queryBuilder.ts:359

Reset the operator and value when the field changes.

Default

true

Inherited from

QueryBuilderContextProviderProps.resetOnFieldChange

---

resetOnOperatorChange?

optional resetOnOperatorChange: boolean

Defined in: packages/core/src/types/queryBuilder.ts:365

Reset the value when the operator changes.

Default

false

Inherited from

QueryBuilderContextProviderProps.resetOnOperatorChange

---

showCloneButtons?

optional showCloneButtons: boolean

Defined in: packages/core/src/types/queryBuilder.ts:341

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

Default

false

Inherited from

QueryBuilderContextProviderProps.showCloneButtons

---

showCombinatorsBetweenRules?

optional showCombinatorsBetweenRules: boolean

Defined in: packages/core/src/types/queryBuilder.ts:323

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: packages/core/src/types/queryBuilder.ts:347

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

Default

false

Inherited from

QueryBuilderContextProviderProps.showLockButtons

---

showMuteButtons?

optional showMuteButtons: boolean

Defined in: packages/core/src/types/queryBuilder.ts:353

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

Default

false

Inherited from

QueryBuilderContextProviderProps.showMuteButtons

---

showNotToggle?

optional showNotToggle: boolean

Defined in: packages/core/src/types/queryBuilder.ts:329

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

Default

false

Inherited from

QueryBuilderContextProviderProps.showNotToggle

---

showShiftActions?

optional showShiftActions: boolean

Defined in: packages/core/src/types/queryBuilder.ts:335

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

Default

false

Inherited from

QueryBuilderContextProviderProps.showShiftActions

---

suppressStandardClassnames?

optional suppressStandardClassnames: boolean

Defined in: packages/core/src/types/queryBuilder.ts:402

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: packages/react-querybuilder/src/types/props.ts:754

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

Inherited from

QueryBuilderContextProviderProps.translations

---

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.