react-component-form

Manage React Forms with ease.

Licence MIT Contributor Covenant

Conventional Commits semantic-release npm version

## 📜 About **react-component-form** is a lightweight form component for [React.js](https://reactjs.org/), it allows you to get the inputs values without state thanks to `onChange` or `onSubmit` props. 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). Example demo: [https://react-component-form.vercel.app/](https://react-component-form.vercel.app/). ## 💾 Install ```sh npm install --save react-component-form ``` ## ⚙️ Usage _Note : The examples use TypeScript, but obviously you can use JavaScript. Be aware that `HandleForm` is the type definition for the `onChange` and `onSubmit` props._ ```tsx import React from 'react' import { Form } from 'react-component-form' import type { HandleForm } from 'react-component-form' export const Example = () => { const handleSubmit: HandleForm = (formData, formElement) => { console.log(formData) // { inputName: 'value of the input' } formElement.reset() } return (
) } ``` 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: - `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 This example shows how to use the `
` component with `useForm` hook to validate the data with [Ajv JSON schema validator](https://ajv.js.org/). You can see a more detailled example in the [./example](./example) folder. ```tsx import React from 'react' import { Form, useForm } from 'react-component-form' import type { HandleUseFormCallback } from 'react-component-form' const schema = { inputName: { type: 'string', minLength: 3, maxLength: 20 } } export const Example = () => { const { handleUseForm, errors, message } = useForm(schema) const onSubmit: HandleUseFormCallback = ( formData, formElement ) => { console.log(formData) // { inputName: 'value of the input validated' } formElement.reset() // 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 ( {errors.inputName != null &&

{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` 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). - `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 even correct a simple spelling mistake. The steps to contribute can be found in [CONTRIBUTING.md](./CONTRIBUTING.md). ## 📄 License [MIT](./LICENSE)