useValueEditor()

useValueEditor<F, O>(props: ValueEditorProps<F, O>): { inputTypeCoerced: InputType; multiValueHandler: (val: any, idx: number) => void; parseNumberMethod: ParseNumberMethod; valueAsArray: any[]; valueListItemClassName: string; }

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

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

Type Parameters

Type Parameter	Default 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; value?: string | undefined; label: string; disabled?: boolean | undefined; name: string; }> | undefined; ... 9 more ...; cl...; 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; }, 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; }	{ [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; value?: string | undefined; label: string; disabled?: boolean | undefined; name: string; }> | undefined; ... 9 more ...; cl...; 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; }, 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; }
O extends string	string

Parameters

Parameter	Type
props	ValueEditorProps<F, O>

Returns

{ inputTypeCoerced: InputType; multiValueHandler: (val: any, idx: number) => void; parseNumberMethod: ParseNumberMethod; valueAsArray: any[]; valueListItemClassName: string; }

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.

inputTypeCoerced

inputTypeCoerced: InputType

Coerced inputType based on inputType and operator.

multiValueHandler()

multiValueHandler: (val: any, idx: number) => void

An update handler for a series of value editors, e.g. when operator is "between". Calling this function will update a single element of the value array and leave the rest of the array as is.

Parameters

Parameter	Type	Description
val	any	The new value for the editor
idx	number	The index of the editor (and the array element to update)

Returns

void

parseNumberMethod

parseNumberMethod: ParseNumberMethod

Evaluated parseNumber method based on parseNumbers prop. This property ends up being the same as the parseNumbers prop minus the "-limited" suffix, unless the "-limited" suffix is present and the inputType is not "number", in which case it's set to false.

valueAsArray

valueAsArray: any[]

Array of values for when the main value represents a list, e.g. when operator is "between" or "in".

valueListItemClassName

valueListItemClassName: string

Class for items in a value editor series (e.g. "between" value editors).

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.