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