Skip to main content

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

ParameterType
propsUseValueEditorParams

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: (val, idx) => 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

ParameterTypeDescription
valanyThe new value for the editor
idxnumberThe 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".

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

Defined in

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.