Package Exports
- rapid-form
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rapid-form) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Rapid React Form
A React hook to manage your form rapidly and easily.
Installation
The rapid form is available as npm package
# NPM
npm install rapid-form
# YARN
yarn add rapid-form
Quick Start
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>
)
}
Error handler
Our error object is made as follows:
{
[fieldName: string]: {
error: boolean,
message: string,
code: 'VALIDATION_ERROR' | 'EMPTY_ERROR'
}
}
API
errors: An object with all errors
validation: A function to control each field (only with required attribute)
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
Sponsor
Would you like to offer me a ☕️?
License
This repository is published under the MIT license.