Rjv-react-antd NPM

rjv-react-antd

Ant Design's form fields powered by the rjv-react

Install

yarn add rjv rjv-react rjv-react-antd

Components

Form

Combines rjv-react's FormProvider and antd's Form components together.

Properties extend Ant's form props:

Name	Type	Default	Description
`data`*	`any`	undefined	initial form data
`ref`	`RefObject<FormApi>`	undefined	ref to the FormApi instance
`validateTrigger`	`string`	'onBlur'	when fields should be validated, possible values `onBlur`, `onChange`, `none`
`focusFirstError`	`boolean`	true	focus the first field with an error after a form submitting
`onSuccess`	`(data: any) => void` \| `Promise<void>`	undefined	successful form submission handler
`onError`	`(firstErrorField: FirstErrorField) => void`	undefined	unsuccessful form submission handler

FormItemField

Helps to create complex form controls.

Properties extend Antd's form item props:

Name	Type	Default	Description
`showAllErrors`	`boolean`	true	show all errors or the only first

Higher Order Fields (HOF)

InputField

HOF over Antd's Input component

Properties:

Name	Type	Default	Description
`path`*	`string`	undefined	path to the data property
`schema`*	`Object<Schema>`	undefined	validation JSON schema
`ref`	`RefObject<FormApi>`	undefined	ref to the FieldApi instance
`dependencies`	`any[]`	[]	external values that affect the validation schema
`label`	`React.ReactNode`	undefined	field label
`help`	`React.ReactNode`	undefined	field help
`placeholder`	`string`	undefined	field placeholder
`inputProps`	`InputProps`	{}	Antd's `InputProps`
`itemProps`	`FormItemProps`	{}	Antd's `FormItemProps`
`clearStateOnChange`	`boolean`	true	mark field as not validated when the field value changes
`autoFocus`	`boolean`	false	focus field on mount
`validateTrigger`	`string`	inherited from the `Form` component or 'onBlur'	possible values are `onBlur`, `onChange`, `none`

NumberField

HOF over Antd's InputNumber component

Properties:

Name	Type	Default	Description
`path`*	`string`	undefined	path to the data property
`schema`*	`Object<Schema>`	undefined	validation JSON schema
`ref`	`RefObject<FormApi>`	undefined	ref to the FieldApi instance
`dependencies`	`any[]`	[]	external values that affect the validation schema
`label`	`React.ReactNode`	undefined	field label
`help`	`React.ReactNode`	undefined	field help
`placeholder`	`string`	undefined	field placeholder
`inputProps`	`NumberProps`	{}	Antd's `NumberProps`
`itemProps`	`FormItemProps`	{}	Antd's `FormItemProps`
`clearStateOnChange`	`boolean`	true	mark field as not validated when the field value changes
`autoFocus`	`boolean`	false	focus field on mount
`validateTrigger`	`string`	inherited from the `Form` component or 'onBlur'	possible values are `onBlur`, `onChange`, `none`

SelectField

HOF over Antd's Select component

Properties:

Name	Type	Default	Description
`path`*	`string`	undefined	path to the data property
`schema`*	`Object<Schema>`	undefined	validation JSON schema
`ref`	`RefObject<FormApi>`	undefined	ref to the FieldApi instance
`dependencies`	`any[]`	[]	external values that affect the validation schema
`children`*	`React.ReactNodeArray`	undefined	select options
`label`	`React.ReactNode`	undefined	field label
`help`	`React.ReactNode`	undefined	field help
`inputProps`	`SelectProps`	{}	Antd's `SelectProps`
`itemProps`	`FormItemProps`	{}	Antd's `FormItemProps`
`clearStateOnChange`	`boolean`	true	mark field as not validated when the field value changes
`autoFocus`	`boolean`	false	focus field on mount
`validateTrigger`	`string`	inherited from the `Form` component or 'onBlur'	possible values are `onBlur`, `onChange`, `none`

SwitchField

HOF over Antd's Switch component

Properties:

Name	Type	Default	Description
`path`*	`string`	undefined	path to the data property
`schema`*	`Object<Schema>`	undefined	validation JSON schema
`ref`	`RefObject<FormApi>`	undefined	ref to the FieldApi instance
`dependencies`	`any[]`	[]	external values that affect the validation schema
`label`	`React.ReactNode`	undefined	field label
`help`	`React.ReactNode`	undefined	field help
`inputProps`	`SwitchProps`	{}	Antd's `SwitchProps`
`itemProps`	`FormItemProps`	{}	Antd's `FormItemProps`
`clearStateOnChange`	`boolean`	true	mark field as not validated when the field value changes
`autoFocus`	`boolean`	false	focus field on mount
`validateTrigger`	`string`	inherited from the `Form` component or 'onChange'	possible values are `onChange`, `none`. The `onBlur` value is treated an `onChange`

CheckboxField

HOF over Antd's Checkbox component

Properties:

Name	Type	Default	Description
`path`*	`string`	undefined	path to the data property
`schema`*	`Object<Schema>`	undefined	validation JSON schema
`ref`	`RefObject<FormApi>`	undefined	ref to the FieldApi instance
`dependencies`	`any[]`	[]	external values that affect the validation schema
`label`	`React.ReactNode`	undefined	field label
`help`	`React.ReactNode`	undefined	field help
`inputProps`	`CheckboxProps`	{}	Antd's `CheckboxProps`
`itemProps`	`FormItemProps`	{}	Antd's `FormItemProps`
`clearStateOnChange`	`boolean`	true	mark field as not validated when the field value changes
`autoFocus`	`boolean`	false	focus field on mount
`validateTrigger`	`string`	inherited from the `Form` component or 'onChange'	possible values are `onChange`, `none`. The `onBlur` value is treated an `onChange`

CheckboxGroupField

HOF over Antd's Checkbox.Group component

Properties:

Name	Type	Default	Description
`path`*	`string`	undefined	path to the data property
`schema`*	`Object<Schema>`	undefined	validation JSON schema
`ref`	`RefObject<FormApi>`	undefined	ref to the FieldApi instance
`dependencies`	`any[]`	[]	external values that affect the validation schema
`children`*	`React.ReactNodeArray`	undefined	checkbox group items
`label`	`React.ReactNode`	undefined	field label
`help`	`React.ReactNode`	undefined	field help
`inputProps`	`CheckboxGroupProps`	{}	Antd's `CheckboxGroupProps`
`itemProps`	`FormItemProps`	{}	Antd's `FormItemProps`
`clearStateOnChange`	`boolean`	true	mark field as not validated when the field value changes
`autoFocus`	`boolean`	false	focus field on mount
`validateTrigger`	`string`	inherited from the `Form` component or 'onChange'	possible values are `onChange`, `none`. The `onBlur` value is treated an `onChange`

RadioGroupField

HOF over Antd's Radio.Group component

Properties:

Name	Type	Default	Description
`path`*	`string`	undefined	path to the data property
`schema`*	`Object<Schema>`	undefined	validation JSON schema
`ref`	`RefObject<FormApi>`	undefined	ref to the FieldApi instance
`dependencies`	`any[]`	[]	external values that affect the validation schema
`children`*	`React.ReactNodeArray`	undefined	radio group items
`label`	`React.ReactNode`	undefined	field label
`help`	`React.ReactNode`	undefined	field help
`inputProps`	`RadioGroupProps`	{}	Antd's `RadioGroupProps`
`itemProps`	`FormItemProps`	{}	Antd's `FormItemProps`
`clearStateOnChange`	`boolean`	true	mark field as not validated when the field value changes
`autoFocus`	`boolean`	false	focus field on mount
`validateTrigger`	`string`	inherited from the `Form` component or 'onChange'	possible values are `onChange`, `none`. The `onBlur` value is treated an `onChange`

RateField

HOF over Antd's Rate component

Properties:

Name	Type	Default	Description
`path`*	`string`	undefined	path to the data property
`schema`*	`Object<Schema>`	undefined	validation JSON schema
`ref`	`RefObject<FormApi>`	undefined	ref to the FieldApi instance
`dependencies`	`any[]`	[]	external values that affect the validation schema
`label`	`React.ReactNode`	undefined	field label
`help`	`React.ReactNode`	undefined	field help
`inputProps`	`RateProps`	{}	Antd's `RateProps`
`itemProps`	`FormItemProps`	{}	Antd's `FormItemProps`
`clearStateOnChange`	`boolean`	true	mark field as not validated when the field value changes
`autoFocus`	`boolean`	false	focus field on mount
`validateTrigger`	`string`	inherited from the `Form` component or 'onChange'	possible values are `onChange`, `none`. The `onBlur` value is treated an `onChange`

DatePickerField

HOF over Antd's DatePicker component

Properties:

Name	Type	Default	Description
`path`*	`string`	undefined	path to the data property
`schema`*	`Object<Schema>`	undefined	validation JSON schema
`ref`	`RefObject<FormApi>`	undefined	ref to the FieldApi instance
`dependencies`	`any[]`	[]	external values that affect the validation schema
`label`	`React.ReactNode`	undefined	field label
`help`	`React.ReactNode`	undefined	field help
`inputProps`	`DatePickerProps`	{}	Antd's `DatePickerProps`
`itemProps`	`FormItemProps`	{}	Antd's `FormItemProps`
`clearStateOnChange`	`boolean`	true	mark field as not validated when the field value changes
`autoFocus`	`boolean`	false	focus field on mount
`validateTrigger`	`string`	inherited from the `Form` component or 'onBlur'	possible values are `onBlur`, `onChange`, `none`

RangePickerField

HOF over Antd's RangePicker component

Properties:

Name	Type	Default	Description
`path`*	`string`	undefined	path to the data property
`schema`*	`Object<Schema>`	undefined	validation JSON schema
`ref`	`RefObject<FormApi>`	undefined	ref to the FieldApi instance
`dependencies`	`any[]`	[]	external values that affect the validation schema
`label`	`React.ReactNode`	undefined	field label
`help`	`React.ReactNode`	undefined	field help
`inputProps`	`RangePickerProps`	{}	Antd's `RangePickerProps`
`itemProps`	`FormItemProps`	{}	Antd's `FormItemProps`
`clearStateOnChange`	`boolean`	true	mark field as not validated when the field value changes
`autoFocus`	`boolean`	false	focus field on mount
`validateTrigger`	`string`	inherited from the `Form` component or 'onBlur'	possible values are `onBlur`, `onChange`, `none`