QueryBuilderDndProps

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

QueryBuilderDnD props.

Extends

• QueryBuilderContextProviderProps

Properties

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/propsUsingReact.ts:557

Inherited from

QueryBuilderContextProviderProps.children

---

controlClassnames?

optional controlClassnames: Partial<Classnames>

Defined in: packages/react-querybuilder/src/types/propsUsingReact.ts:532

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: null | ComponentType<ActionWithRulesAndAddersProps>; addRuleAction: null | ComponentType<ActionWithRulesAndAddersProps>; cloneGroupAction: null | ComponentType<ActionWithRulesProps>; cloneRuleAction: null | ComponentType<ActionProps>; combinatorSelector: null | ComponentType<CombinatorSelectorProps>; dragHandle: null | ForwardRefExoticComponent<DragHandleProps & RefAttributes<HTMLElement>>; fieldSelector: null | 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; value?: string | undefined; label: string; disabled?: boolean | undefined; name: string; }> | undefined; ... 9 more ...; className?: Clas..., operator: string) => boolean; defaultOperator: string; defaultValue: any; disabled: boolean; id: string; inputType: InputType | null | undefined; label: string; name: string; operators: FlexibleOptionList<{ [x: string]: unknown; value?: string | undefined; label: string; disabled?: boolean | undefined; name: string; }> | undefined; placeholder: string; validator: RuleValidator; value: string; valueEditorType: ValueEditorType | ((operator: string) => ValueEditorType) | undefined; values: FlexibleOptionList<{ [x: string]: unknown; value?: string | undefined; label: string; disabled?: boolean | undefined; name: string; }> | undefined; valueSources: ValueSources | ((operator: string) => ValueSources) | undefined; }>>; inlineCombinator: null | ComponentType<InlineCombinatorProps>; lockGroupAction: null | ComponentType<ActionWithRulesProps>; lockRuleAction: null | ComponentType<ActionWithRulesProps>; notToggle: null | ComponentType<NotToggleProps>; operatorSelector: null | ComponentType<OperatorSelectorProps>; removeGroupAction: null | ComponentType<ActionWithRulesProps>; removeRuleAction: null | ComponentType<ActionProps>; 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; value?: string | undefined; label: string; disabled?: boolean | undefined; name: string; }> | undefined; ... 9 more ...; className?: Clas..., operator: string) => boolean; defaultOperator: string; defaultValue: any; disabled: boolean; id: string; inputType: null | InputType; label: string; name: string; operators: FlexibleOptionList<{[key: string]: unknown; disabled: boolean; label: string; name: string; value: string; }>; placeholder: string; validator: RuleValidator; value: string; valueEditorType: ValueEditorType | (operator: string) => ValueEditorType; values: FlexibleOptionList<{[key: string]: unknown; disabled: boolean; label: string; name: string; value: string; }>; valueSources: ValueSources | (operator: string) => ValueSources; }, 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: null | ComponentType<ShiftActionsProps>; valueEditor: null | 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; value?: string | undefined; label: string; disabled?: boolean | undefined; name: string; }> | undefined; ... 9 more ...; className?: Clas..., operator: string) => boolean; defaultOperator: string; defaultValue: any; disabled: boolean; id: string; inputType: InputType | null | undefined; label: string; name: string; operators: FlexibleOptionList<{ [x: string]: unknown; value?: string | undefined; label: string; disabled?: boolean | undefined; name: string; }> | undefined; placeholder: string; validator: RuleValidator; value: string; valueEditorType: ValueEditorType | ((operator: string) => ValueEditorType) | undefined; values: FlexibleOptionList<{ [x: string]: unknown; value?: string | undefined; label: string; disabled?: boolean | undefined; name: string; }> | undefined; valueSources: ValueSources | ((operator: string) => ValueSources) | undefined; }, string>>; valueSelector: ComponentType<ValueSelectorProps<{[key: string]: unknown; disabled: boolean; label: string; name: string; value: string; }>>; valueSourceSelector: null | ComponentType<ValueSourceSelectorProps>; }>

Defined in: packages/react-querybuilder/src/types/propsUsingReact.ts:520

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/react-querybuilder/src/types/propsUsingReact.ts:549

Enables debug logging for QueryBuilder (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/react-querybuilder/src/types/propsUsingReact.ts:543

Enables drag-and-drop features.

Default

false

Inherited from

QueryBuilderContextProviderProps.enableDragAndDrop

---

enableMountQueryChange?

optional enableMountQueryChange: boolean

Defined in: packages/react-querybuilder/src/types/propsUsingReact.ts:527

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"

---

translations?

optional translations: Partial<Translations>

Defined in: packages/react-querybuilder/src/types/propsUsingReact.ts:537

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.