rjv-react-antd

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

Install

yarn add rjv rjv-react rjv-react-antd

Components

• Form
• FormItemField

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
• NumberField
• SelectField
• SwitchField
• CheckboxField
• CheckboxGroupField
• RadioGroupField
• RateField
• DatePickerField
• RangePickerField

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

License

rjv-react-antd is released under the MIT license. See the LICENSE file for license text and copyright information.