diff --git a/README.md b/README.md index 8da7aa2..e8c6749 100644 --- a/README.md +++ b/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 `
` 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{errors.inputName[0].message}
} + + {message != null &&{message}
} ) } ``` +## 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 `` 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