.github | ||
example | ||
src | ||
.commitlintrc.json | ||
.editorconfig | ||
.eslintignore | ||
.eslintrc.json | ||
.gitattributes | ||
.gitignore | ||
.markdownlint-cli2.jsonc | ||
.npmrc | ||
.prettierrc.json | ||
.releaserc.json | ||
CODE_OF_CONDUCT.md | ||
CONTRIBUTING.md | ||
jest.config.json | ||
LICENSE | ||
package-lock.json | ||
package.json | ||
README.md | ||
tsconfig.json | ||
tsup.config.js |
react-component-form
Manage React Forms with ease.
📜 About
react-component-form is a lightweight form component for React.js, it allows you to get the inputs values without state thanks to onChange
or onSubmit
props.
There is also a React Hooks to be used in combination with the <Form />
component to validate the data with Ajv JSON schema validator, see advanced usage.
Example demo: https://react-component-form.vercel.app/.
💾 Install
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.
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 (
<Form onSubmit={handleSubmit}>
<input type="text" name="inputName" />
<button type="submit">Submit</button>
</Form>
)
}
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 constructor.formElement
: The HTML form element in the DOM so for example you can access the.reset()
method on a HTMLFormElement.
⚙️ Advanced Usage
This example shows how to use the <Form />
component with useForm
hook to validate the data with Ajv JSON schema validator.
You can see a more detailled example in the ./example folder.
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<typeof schema> = (
formData,
formElement,
) => {
console.log(formData) // { inputName: 'value of the input validated and type-safe' }
formElement.reset()
// The return can be either `null` or an object with a global message of type `'error' | 'success'`.
return {
type: "success",
message: "Success: Form submitted",
}
}
return (
<Form onSubmit={handleUseForm(onSubmit)}>
<input type="text" name="inputName" />
{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).
Returns
handleUseForm(onSubmit)
: Function to be used with theonSubmit
oronChange
prop of the<Form />
component.fetchState = 'idle'
: The current state of the form ('error' | 'success' | 'idle' | 'loading'
).setFetchState
: Function to update thefetchState
.message
: Global message of the form (not specific to a property).setMessage
: Function to update themessage
.errors
: Object of errors:- Key: correspond to a property in the JSON Schema.
- Value: array of ajv
ErrorObject
. The array will always have at least one element (never empty) in case of errors. If the value isundefined
, 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.