The Rapid Form is a React hook to develop an HTML form quickly.
The Rapid Form is available as NPM package
# NPM
npm install rapid-form
# YARN
yarn add rapid-form
import useRapidForm from 'rapid-form'
function App() {
const {
errors,
validation,
handleSubmit,
reset, // not required
submitValidation // not required
} = useRapidForm()
const s = (values, err, e) => {
if (_.isEmpty(err)) {
reset(e)
}
}
return (
<form
id="rapidForm"
ref={submitValidation}
autoComplete="off"
onSubmit={handleSubmit(s)}
>
<input name="username" ref={validation} placeholder="Username" required />
{errors.username?.message}
// OR
{errors.username && yourI18Label[errors.username.code]}
<label>Email:</label>
<input name="email" type="email" ref={validation} required />
{errors.email?.message}
<label>Age:</label>
<input name="age" ref={validation} required pattern="\d+" />
{errors.age?.message}
<button type="submit">Submit</button>
</form>
)
}
Our error object is made as follows:
{
[fieldName: string]: {
error: boolean,
message: string,
code: 'VALIDATION_ERROR' | 'EMPTY_ERROR'
}
}
-
values: An object with all values
-
errors: An object with all errors
-
validation: A function to control each field (only with required attribute)
-
values: Object where you can get form values in real-time
-
handleSubmit: A function to put your submit callback. (params: (values, errors, event))
-
reset: A simple way to reset the form
-
submitValidation: A function to add a plus fields control to the submit event
Any contribution is appreciated. You can get started with the steps below:
-
Fork this repository (learn how to do this here).
-
Clone the forked repository.
-
Make your changes and create a pull request (learn how to do this).
-
I will attend to your pull request and provide some feedback.
Ping me on Twitter
This repository is licensed under the MIT License.
Don't be shy! 😜