rjv-react-antd

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

Usage no npm install needed!

<script type="module">
  import rjvReactAntd from 'https://cdn.skypack.dev/rjv-react-antd';
</script>

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

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.