rjv-react-antd v5.0.0-alpha.1
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
- 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.
2 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago