docs(readme): add API section for useForm hook

This commit is contained in:
Divlo 2022-08-26 22:48:23 +02:00
parent 01419426a3
commit 5c49f94b53
No known key found for this signature in database
GPG Key ID: 8F9478F220CE65E9

View File

@ -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). 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 ## 💾 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: Instead to get the `event` param you get `formData` and `formElement` parameters:
@ -83,7 +83,7 @@ const schema = {
} }
export const Example = () => { export const Example = () => {
const { errors, handleUseForm } = useForm(schema) const { handleUseForm, errors, message } = useForm(schema)
const onSubmit: HandleUseFormCallback<typeof schema> = ( const onSubmit: HandleUseFormCallback<typeof schema> = (
formData, formData,
@ -91,7 +91,12 @@ export const Example = () => {
) => { ) => {
console.log(formData) // { inputName: 'value of the input validated' } console.log(formData) // { inputName: 'value of the input validated' }
formElement.reset() 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 ( return (
@ -100,11 +105,34 @@ export const Example = () => {
{errors.inputName != null && <p>{errors.inputName[0].message}</p>} {errors.inputName != null && <p>{errors.inputName[0].message}</p>}
<button type='submit'>Submit</button> <button type='submit'>Submit</button>
{message != null && <p>{message}</p>}
</Form> </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 ## 💡 Contributing
Anyone can help to improve the project, submit a Feature Request, a bug report or Anyone can help to improve the project, submit a Feature Request, a bug report or