1.1.1 • Published 3 years ago
useformcl v1.1.1
What is this?
This package is a custom React Hook for form management. The state of the form will be managed by the package and the user can choose to provide validation logic which will be checked on form submission. If an input is invalid, an object of errors will be returned and the submission will abort.
Installation
npm i useFormCL --save
Then...
import { useFormCL } from 'useFormCL';
const form = () => {
const validate(formValues) {
let errors = {};
if (values.hasOwnProperty("firstName") && !values.firstName) {
errors.firstName = "First name is required";
}
return errors;
}
const initialFormValues = {
firstName: ""
}
const { handleChange, handleSubmit, values, errors } = useFormCL(
callBack, //function to call on form submission
validate, //function returning object of validation errors
initialFormValues //object of initial form values
);
function callBack() {
console.log(values.firstName)
}
return(
<form onSubmit={handleSubmit} noValidate>
<TextField
name="firstName"
label="First Name"
value={values.firstName}
onChange={handleChange}
/>
{/* only renders error if there is one */}
{errors.firstName && (
<div style={{ fontSize: 12, color: "red" }}>
{errors.firstName}
</div>
)}
<button type="submit">
Submit
</button>
</form>
)
}