useValueEditor()

useValueEditor<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?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string...; defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: InputType | null; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: string[] | FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }> | FlexibleOption<string>[] | string | FlexibleOption<string>[]; placeholder?: string; subproperties?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string | FlexibleOpt...>; validator?: RuleValidator; value: string; valueEditorType?: ValueEditorType | ((operator: string) => ValueEditorType); values?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }>; valueSources?: ValueSources | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); }, operator: string) => boolean); defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: InputType | null; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: string[] | FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }> | FlexibleOption<string>[] | string | FlexibleOption<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?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string | FlexibleOpt..., 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?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<string>[] | (string | FlexibleOption<...>)[] | undefined; placeholder?: string; subproperties?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (s...; 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 | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); }>; validator?: RuleValidator; value: string; valueEditorType?: ValueEditorType | ((operator: string) => ValueEditorType); values?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }>; valueSources?: ValueSources | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); } = {[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?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string...; defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: InputType | null; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: string[] | FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }> | FlexibleOption<string>[] | string | FlexibleOption<string>[]; placeholder?: string; subproperties?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string | FlexibleOpt...>; validator?: RuleValidator; value: string; valueEditorType?: ValueEditorType | ((operator: string) => ValueEditorType); values?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }>; valueSources?: ValueSources | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); }, operator: string) => boolean); defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: InputType | null; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: string[] | FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }> | FlexibleOption<string>[] | string | FlexibleOption<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?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string | FlexibleOpt..., 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?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<string>[] | (string | FlexibleOption<...>)[] | undefined; placeholder?: string; subproperties?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (s...; 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 | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); }>; validator?: RuleValidator; value: string; valueEditorType?: ValueEditorType | ((operator: string) => ValueEditorType); values?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }>; valueSources?: ValueSources | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); }, O extends string = string>(props: ValueEditorProps<F, O>): UseValueEditor

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

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?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string...; defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: InputType | null; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: string[] | FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }> | FlexibleOption<string>[] | string | FlexibleOption<string>[]; placeholder?: string; subproperties?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string | FlexibleOpt...>; validator?: RuleValidator; value: string; valueEditorType?: ValueEditorType | ((operator: string) => ValueEditorType); values?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }>; valueSources?: ValueSources | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); }, operator: string) => boolean); defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: InputType | null; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: string[] | FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }> | FlexibleOption<string>[] | string | FlexibleOption<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?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string | FlexibleOpt..., 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?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<string>[] | (string | FlexibleOption<...>)[] | undefined; placeholder?: string; subproperties?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (s...; 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 | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); }>; validator?: RuleValidator; value: string; valueEditorType?: ValueEditorType | ((operator: string) => ValueEditorType); values?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }>; valueSources?: ValueSources | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); } {[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?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string...; defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: InputType | null; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: string[] | FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }> | FlexibleOption<string>[] | string | FlexibleOption<string>[]; placeholder?: string; subproperties?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string | FlexibleOpt...>; validator?: RuleValidator; value: string; valueEditorType?: ValueEditorType | ((operator: string) => ValueEditorType); values?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }>; valueSources?: ValueSources | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); }, operator: string) => boolean); defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: InputType | null; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: string[] | FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }> | FlexibleOption<string>[] | string | FlexibleOption<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?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string | FlexibleOpt..., 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?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<string>[] | (string | FlexibleOption<...>)[] | undefined; placeholder?: string; subproperties?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (s...; 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 | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); }>; validator?: RuleValidator; value: string; valueEditorType?: ValueEditorType | ((operator: string) => ValueEditorType); values?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }>; valueSources?: ValueSources | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); }

O extends string string

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?: string[] \| FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean \| undefined; name: string; value: string; }> \| FlexibleOption<...>[] \| (string...; `defaultOperator?`: `string`; `defaultValue?`: `any`; `disabled?`: `boolean`; `id?`: `string`; `inputType?`: `InputType` \| `null`; `label`: `string`; `matchModes?`: `boolean` \| `MatchMode`[] \| `FlexibleOption`<`MatchMode`>[]; `name`: `string`; `operators?`: `string`[] \| `FlexibleOptionList`<{[`key`: `string`]: `unknown`; `disabled?`: `boolean`; `label`: `string`; `name`: `string`; `value`: `string`; }> \| `FlexibleOption`<`string`>[] \| string \| FlexibleOption<string>[]; `placeholder?`: `string`; `subproperties?`: `FlexibleOptionList`<{ [x: string]: unknown; label: string; disabled?: boolean \| undefined; name: string; value: string; id?: string \| undefined; operators?: string[] \| FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean \| undefined; name: string; value: string; }> \| FlexibleOption<...>[] \| (string \| FlexibleOpt...>; `validator?`: `RuleValidator`; `value`: `string`; `valueEditorType?`: `ValueEditorType` \| ((`operator`: `string`) => `ValueEditorType`); `values?`: `FlexibleOptionList`<{[`key`: `string`]: `unknown`; `disabled?`: `boolean`; `label`: `string`; `name`: `string`; `value`: `string`; }>; `valueSources?`: `ValueSources` \| [`FlexibleOption`, `...FlexibleOption[]`] \| ((`operator`: `string`) => `ValueSources` \| [`FlexibleOption`, `...FlexibleOption[]`]); }, `operator`: `string`) => `boolean`); `defaultOperator?`: `string`; `defaultValue?`: `any`; `disabled?`: `boolean`; `id?`: `string`; `inputType?`: `InputType` \| `null`; `label`: `string`; `matchModes?`: `boolean` \| `MatchMode`[] \| `FlexibleOption`<`MatchMode`>[]; `name`: `string`; `operators?`: `string`[] \| `FlexibleOptionList`<{[`key`: `string`]: `unknown`; `disabled?`: `boolean`; `label`: `string`; `name`: `string`; `value`: `string`; }> \| `FlexibleOption`<`string`>[] \| string \| FlexibleOption<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?: string[] \| FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean \| undefined; name: string; value: string; }> \| FlexibleOption<...>[] \| (string \| FlexibleOpt..., `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?`: string[] \| FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean \| undefined; name: string; value: string; }> \| FlexibleOption<string>[] \| (string \| FlexibleOption<...>)[] \| undefined; `placeholder?`: `string`; `subproperties?`: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean \| undefined; name: string; value: string; id?: string \| undefined; operators?: string[] \| FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean \| undefined; name: string; value: string; }> \| FlexibleOption<...>[] \| (s...; `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` \| [`FlexibleOption`, `...FlexibleOption[]`] \| ((`operator`: `string`) => `ValueSources` \| [`FlexibleOption`, `...FlexibleOption[]`]); }>; `validator?`: `RuleValidator`; `value`: `string`; `valueEditorType?`: `ValueEditorType` \| ((`operator`: `string`) => `ValueEditorType`); `values?`: `FlexibleOptionList`<{[`key`: `string`]: `unknown`; `disabled?`: `boolean`; `label`: `string`; `name`: `string`; `value`: `string`; }>; `valueSources?`: `ValueSources` \| [`FlexibleOption`, `...FlexibleOption[]`] \| ((`operator`: `string`) => `ValueSources` \| [`FlexibleOption`, `...FlexibleOption[]`]); }	{[`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?: string[] \| FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean \| undefined; name: string; value: string; }> \| FlexibleOption<...>[] \| (string...; `defaultOperator?`: `string`; `defaultValue?`: `any`; `disabled?`: `boolean`; `id?`: `string`; `inputType?`: `InputType` \| `null`; `label`: `string`; `matchModes?`: `boolean` \| `MatchMode`[] \| `FlexibleOption`<`MatchMode`>[]; `name`: `string`; `operators?`: `string`[] \| `FlexibleOptionList`<{[`key`: `string`]: `unknown`; `disabled?`: `boolean`; `label`: `string`; `name`: `string`; `value`: `string`; }> \| `FlexibleOption`<`string`>[] \| string \| FlexibleOption<string>[]; `placeholder?`: `string`; `subproperties?`: `FlexibleOptionList`<{ [x: string]: unknown; label: string; disabled?: boolean \| undefined; name: string; value: string; id?: string \| undefined; operators?: string[] \| FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean \| undefined; name: string; value: string; }> \| FlexibleOption<...>[] \| (string \| FlexibleOpt...>; `validator?`: `RuleValidator`; `value`: `string`; `valueEditorType?`: `ValueEditorType` \| ((`operator`: `string`) => `ValueEditorType`); `values?`: `FlexibleOptionList`<{[`key`: `string`]: `unknown`; `disabled?`: `boolean`; `label`: `string`; `name`: `string`; `value`: `string`; }>; `valueSources?`: `ValueSources` \| [`FlexibleOption`, `...FlexibleOption[]`] \| ((`operator`: `string`) => `ValueSources` \| [`FlexibleOption`, `...FlexibleOption[]`]); }, `operator`: `string`) => `boolean`); `defaultOperator?`: `string`; `defaultValue?`: `any`; `disabled?`: `boolean`; `id?`: `string`; `inputType?`: `InputType` \| `null`; `label`: `string`; `matchModes?`: `boolean` \| `MatchMode`[] \| `FlexibleOption`<`MatchMode`>[]; `name`: `string`; `operators?`: `string`[] \| `FlexibleOptionList`<{[`key`: `string`]: `unknown`; `disabled?`: `boolean`; `label`: `string`; `name`: `string`; `value`: `string`; }> \| `FlexibleOption`<`string`>[] \| string \| FlexibleOption<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?: string[] \| FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean \| undefined; name: string; value: string; }> \| FlexibleOption<...>[] \| (string \| FlexibleOpt..., `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?`: string[] \| FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean \| undefined; name: string; value: string; }> \| FlexibleOption<string>[] \| (string \| FlexibleOption<...>)[] \| undefined; `placeholder?`: `string`; `subproperties?`: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean \| undefined; name: string; value: string; id?: string \| undefined; operators?: string[] \| FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean \| undefined; name: string; value: string; }> \| FlexibleOption<...>[] \| (s...; `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` \| [`FlexibleOption`, `...FlexibleOption[]`] \| ((`operator`: `string`) => `ValueSources` \| [`FlexibleOption`, `...FlexibleOption[]`]); }>; `validator?`: `RuleValidator`; `value`: `string`; `valueEditorType?`: `ValueEditorType` \| ((`operator`: `string`) => `ValueEditorType`); `values?`: `FlexibleOptionList`<{[`key`: `string`]: `unknown`; `disabled?`: `boolean`; `label`: `string`; `name`: `string`; `value`: `string`; }>; `valueSources?`: `ValueSources` \| [`FlexibleOption`, `...FlexibleOption[]`] \| ((`operator`: `string`) => `ValueSources` \| [`FlexibleOption`, `...FlexibleOption[]`]); }
`O` extends `string`	`string`

Parameters

Parameter	Type
`props`	`ValueEditorProps`<`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.

Type Parameters​

Parameters​

Returns​

Examples​

Type Parameters

Parameters

Returns

Examples