6b3056422e | ||
---|---|---|
.. | ||
stories | ||
test | ||
README.md | ||
form-context.ts | ||
form.tsx | ||
index.ts | ||
style.scss |
README.md
Form
A form component to handle form state and provide input helper props.
Usage
const initialValues = { firstName: '' };
<Form onSubmit={ ( values ) => {} } initialValues={ initialValues }>
{ ( { getInputProps, values, errors, handleSubmit } ) => (
<div>
<TextControl
label={ 'First Name' }
{ ...getInputProps( 'firstName' ) }
/>
<Button
isPrimary
onClick={ handleSubmit }
disabled={ Object.keys( errors ).length }
>
Submit
</Button>
</div>
) }
</Form>;
Usage with FormContext
const initialValues = { firstName: '' };
const Field = () => {
const formProps = useFormContext< { foo: string } >();
return <input type="text" { ...formProps.getInputProps<string>( 'firstName' ) } />
}
<Form
onSubmit={ ( values ) => {} }
initialValues={ initialValues }
>
{ ( {
errors,
handleSubmit,
} ) => (
<div>
<Field />
<Button
isPrimary
onClick={ handleSubmit }
disabled={ Object.keys( errors ).length }
>
Submit
</Button>
</div>
) }
</Form>
To see the properties available within useFormContext()
check out the FormContext
type here.
Props
Name | Type | Default | Description |
---|---|---|---|
children |
* | null |
A renderable component in which to pass this component's state and helpers. Generally a number of input or other form elements |
errors |
Object | {} |
Object of all initial errors to store in state |
initialValues |
Object | {} |
Object key:value pair list of all initial field values |
onSubmit |
Function | noop |
Function to call when a form is submitted with valid fields |
validate |
Function | noop |
A function that is passed a list of all values and should return an errors object with error response |
touched |
Object | {} |
This prop helps determine whether or not a field has received focus |
onChange |
Function | null |
A function that receives the value of the input; called when selected items change, whether added, edited, or removed |