Peasy Form
npm install react-peasy-form
<Form />
The base form component and context provider for all enclosed form fields.
<Form = => <div> <h2>Inputs</h2> <Input ="title" = ="text" /> <Input ="name.first" ="text" = /> <Input ="name.last" ="text" /> </div> <div> <h2>Values</h2> <ul> <li><Value ="title" /></li> <li> <Value = = /> </li> </ul> </div> <div> <h2>Errors</h2> <Error ="name.first" /> </div> <Status = /></Form>
Props
defaults?: { [key: string]: any }
Default form values in the form of key/value pairs where the key is a form field name, and the value is the form field value. Values in nested objects can be accessed through dot notation.
validateOn?: 'change' | 'blur' | 'submit'
The default setting describing when to trigger field validation. This can be overridden on a per-field basis
validationStrategy?: (value: any, validation: any) => true | Array<string | Error | JSX.Element>
Applies a field validation to a field value. This can be used to support various third party validation libraries.
onSubmit(values: { [key: string]: any }): void
Executed when the form is submitted. onSubmit
gets passed an object mapping field names to transformed field values. Nested values are supported through dot notation.
preValidate?(): void
Executed before a form's onSubmit validation occurs.
onError?(errors: { [key: string]: Array<string | Error | JSX.Element> }): void
Executed when a form's onSubmit validation fails
Form Fields
Supported Input Fields
<Input />
<Select />
<Textarea />
Props
Each field supports all the props of the field it is shadowing, plus:
name: string
The key associated with a form field's value. Supports nested objects through dot notation.
transform?: (value: any) => any
Used to transform a fields before validation occurs. The transformed value is returned by onSubmit
validate?: any
A function used to validate a field's value. The function signature when using the default validation strategy is (value: any) => true | Array<string | Error | JSX.Element>
validateOn?: 'submit' | 'blur' | 'change'
Override the form's default validateOn
<Value />
Outputs the transformed value of a form field.
Props
name: string | string[]
The field name or names to render
render?: (value: any | any[], status: FormStatus | FormStatus[]) => JSX.Element
<Status />
Outputs the status of the form or a specific field.
Props
name?: string
If defined, only this field's status will be passed to render
render: (status: FormStatus) => JSX.Element
<Err />
Outputs any errors associated with a field.
Props
name: string
The desired field's name
render?: (errors: Array<string | Error | JSX.Element>) => JSX.Element
TODO:
- Add live examples