useValueEditor()

useValueEditor(props): object

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

Parameters

Parameter	Type
props	UseValueEditorParams

Returns

object

The value as an array (valueAsArray) and a change handler for series of editors (multiValueHandler).

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.

multiValueHandler()

multiValueHandler: (v, i) => void

Parameters

Parameter	Type
v	any
i	number

Returns

void

valueAsArray

valueAsArray: any[]

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".

Source

packages/react-querybuilder/src/hooks/useValueEditor.ts:47

---

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.