Skip to main content

useValueEditor()

useValueEditor<F, O>(props: ValueEditorProps<F, O>): UseValueEditor

Defined in: packages/react-querybuilder/src/components/ValueEditor.tsx:290

This hook is primarily concerned with multi-value editors like date range pickers, editors for 'in' and 'between' operators, etc.

Type Parameters

Type ParameterDefault type
F extends {[key: string]: unknown; className?: Classname; comparator?: string | (f: {[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; }> | undefined; ... 11 more ...; className?: Cl...; defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: null | InputType; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: 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; }> | undefined; ... 11 more ...; className?: Classname | unde...>; 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; }, operator: string) => boolean; defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: null | InputType; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }>; placeholder?: string; subproperties?: FlexibleOptionList<{[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; }> | undefined; ... 11 more ...; className?: Classname | unde..., 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; }> | 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; }> | undefined; ... 11 more ...; className...; 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; }>; 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; }{[key: string]: unknown; className?: Classname; comparator?: string | (f: {[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; }> | undefined; ... 11 more ...; className?: Cl...; defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: null | InputType; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: 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; }> | undefined; ... 11 more ...; className?: Classname | unde...>; 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; }, operator: string) => boolean; defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: null | InputType; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }>; placeholder?: string; subproperties?: FlexibleOptionList<{[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; }> | undefined; ... 11 more ...; className?: Classname | unde..., 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; }> | 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; }> | undefined; ... 11 more ...; className...; 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; }>; 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; }
O extends stringstring

Parameters

ParameterType
propsValueEditorProps<F, O>

Returns

UseValueEditor

The value as an array (valueAsArray), a change handler for series of editors (multiValueHandler), a processed version of the parseNumbers prop (parseNumberMethod), and the classname(s) to be applied to each editor in editor series (valueListItemClassName).

NOTE: The following logic only applies if skipHook is not true. To avoid automatically updating the value, pass { skipHook: true }.

If the value is an array of non-zero length, the operator is not one of the known multi-value operators ("between", "notBetween", "in", "notIn"), and the type is not "multiselect", then the value will be set to the first element of the array (i.e., value[0]).

The same thing will happen if inputType is "number" and value is a string containing a comma, since <input type="number"> doesn't handle commas.

Examples

// Consider the following rule:
`{ field: "f1", operator: "in", value: ["twelve","fourteen"] }`
// If `operator` changes to "=", the value will be reset to "twelve".
// Consider the following rule:
`{ field: "f1", operator: "between", value: "12,14" }`
// If `operator` changes to "=", the value will be reset to "12".

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.