docs(readme): add API section for useForm
hook
This commit is contained in:
parent
01419426a3
commit
5c49f94b53
36
README.md
36
README.md
@ -24,7 +24,7 @@
|
||||
|
||||
There is also a [React Hooks](https://reactjs.org/docs/hooks-intro.html) to be used in combination with the `<Form />` component to validate the data with [Ajv JSON schema validator](https://ajv.js.org/), see [advanced usage](#%EF%B8%8F-advanced-usage).
|
||||
|
||||
Demo: [https://divlo.github.io/react-component-form/](https://divlo.github.io/react-component-form/).
|
||||
Demo: [https://react-component-form.vercel.app/](https://react-component-form.vercel.app/).
|
||||
|
||||
## 💾 Install
|
||||
|
||||
@ -56,7 +56,7 @@ export const Example = () => {
|
||||
}
|
||||
```
|
||||
|
||||
Basically you have access to the same props of the HTML `form` tag in React, but the onSubmit and the onChange props are differents.
|
||||
Basically you have access to the same props of the HTML `form` tag in React, but the `onSubmit` and the `onChange` props are differents.
|
||||
|
||||
Instead to get the `event` param you get `formData` and `formElement` parameters:
|
||||
|
||||
@ -83,7 +83,7 @@ const schema = {
|
||||
}
|
||||
|
||||
export const Example = () => {
|
||||
const { errors, handleUseForm } = useForm(schema)
|
||||
const { handleUseForm, errors, message } = useForm(schema)
|
||||
|
||||
const onSubmit: HandleUseFormCallback<typeof schema> = (
|
||||
formData,
|
||||
@ -91,7 +91,12 @@ export const Example = () => {
|
||||
) => {
|
||||
console.log(formData) // { inputName: 'value of the input validated' }
|
||||
formElement.reset()
|
||||
return null
|
||||
|
||||
// The return can be either `null` or an object with a global message of type `'error' | 'success'`.
|
||||
return {
|
||||
type: 'success',
|
||||
value: 'Success: Form submitted'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
@ -100,11 +105,34 @@ export const Example = () => {
|
||||
{errors.inputName != null && <p>{errors.inputName[0].message}</p>}
|
||||
|
||||
<button type='submit'>Submit</button>
|
||||
|
||||
{message != null && <p>{message}</p>}
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### `useForm(schema)`
|
||||
|
||||
#### Parameters
|
||||
|
||||
- `schema`: The JSON schema to validate the data (recommended to use [@sinclair/typebox](https://www.npmjs.com/package/@sinclair/typebox)).
|
||||
|
||||
#### Returns
|
||||
|
||||
- `handleUseForm(onSubmit)`: Function to be used with the `onSubmit` prop of the `<Form />` component.
|
||||
- `fetchState = 'idle'`: The current state of the form (`'error' | 'success' | 'idle' | 'loading'`).
|
||||
- `setFetchState`: Function to update the `fetchState`.
|
||||
- `message`: Global message of the form (not specific to a property).
|
||||
- `setMessage`: Function to update the `message`.
|
||||
- `errors`: Object of errors:
|
||||
- Key: correspond to a property in the JSON Schema.
|
||||
- Value: array of [ajv `ErrorObject`](https://ajv.js.org/api.html#error-objects).
|
||||
The array will always have at least one element (never empty) in case of errors.
|
||||
If the value is `undefined`, it means there are no errors for this property.
|
||||
|
||||
## 💡 Contributing
|
||||
|
||||
Anyone can help to improve the project, submit a Feature Request, a bug report or
|
||||
|
Reference in New Issue
Block a user