diff --git a/README.md b/README.md index e8c6749..a8cfd9b 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://react-component-form.vercel.app/](https://react-component-form.vercel.app/). +Example demo: [https://react-component-form.vercel.app/](https://react-component-form.vercel.app/). ## 💾 Install @@ -60,8 +60,8 @@ Basically you have access to the same props of the HTML `form` tag in React, but Instead to get the `event` param you get `formData` and `formElement` parameters: -- `formData`: It's an object where the keys are the name of your inputs and the current value. Behind the scene, it uses the [FormData](https://developer.mozilla.org/docs/Web/API/FormData) constructor. -- `formElement`: It's the actual HTML form element in the DOM so for example you can access the `.reset()` method on a [HTMLFormElement](https://developer.mozilla.org/docs/Web/API/HTMLFormElement). +- `formData`: Object where the keys are the name of your inputs and the current value. Behind the scene, it uses the [FormData](https://developer.mozilla.org/docs/Web/API/FormData) constructor. +- `formElement`: The HTML form element in the DOM so for example you can access the `.reset()` method on a [HTMLFormElement](https://developer.mozilla.org/docs/Web/API/HTMLFormElement). ## ⚙️ Advanced Usage @@ -122,7 +122,7 @@ export const Example = () => { #### Returns -- `handleUseForm(onSubmit)`: Function to be used with the `onSubmit` prop of the `` component. +- `handleUseForm(onSubmit)`: Function to be used with the `onSubmit` or `onChange` 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). diff --git a/src/components/Form.tsx b/src/components/Form.tsx index 5ae4e36..b864fcf 100644 --- a/src/components/Form.tsx +++ b/src/components/Form.tsx @@ -4,6 +4,10 @@ export interface FormDataObject { [key: string]: FormDataEntryValue } +/** + * @param formData Object where the keys are the name of your inputs and the current value. + * @param formElement The HTML form element in the DOM. + */ export type HandleForm = ( formData: FormDataObject, formElement: HTMLFormElement diff --git a/src/hooks/useForm.ts b/src/hooks/useForm.ts index 0c184a2..a508ef4 100644 --- a/src/hooks/useForm.ts +++ b/src/hooks/useForm.ts @@ -16,10 +16,17 @@ export type ErrorsObject = { [key in keyof Partial]: Error[] | undefined } +export type HandleUseFormCallbackResult = Message | null + +/** + * @param formData Object where the keys are the name of your inputs and the current value. + * @param formElement The HTML form element in the DOM. + * @returns The return can be either `null` or an object with a global message of type `'error' | 'success'`. + */ export type HandleUseFormCallback = ( formData: Static>, formElement: HTMLFormElement -) => Promise | null> | Message | null +) => Promise> | HandleUseFormCallbackResult export type HandleUseForm = ( callback?: HandleUseFormCallback @@ -40,8 +47,14 @@ export interface PropertiesMessage { export type Message = GlobalMessage | PropertiesMessage export interface UseFormResult { + /** + * Function to be used with the `onSubmit` or `onChange` prop of the `` component. + */ handleUseForm: HandleUseForm + /** + * The current state of the form. + */ readonly fetchState: FetchState setFetchState: React.Dispatch> @@ -52,11 +65,13 @@ export interface UseFormResult { setMessage: React.Dispatch> /** - * Errors for each property. + * Object of errors: + * - Key: correspond to a property in the JSON Schema. + * - Value: array of {@link ErrorObject}. * - * The array will always have at least one element (never empty) in case of errors. + * The array will always have at least one element (never empty) in case of errors. * - * `undefined` means no errors. + * If the value is `undefined`, it means there are no errors for this property. */ readonly errors: ErrorsObject } @@ -110,7 +125,7 @@ export const useForm = ( formElement ) if (message != null) { - const { value = undefined, type, properties } = message + const { value, type, properties } = message setMessage(value) setFetchState(type) if (type === 'error') {