Formal 🤵🏼
A very sophisticated form state manager for React. 🎩
Note: Decided to use Yup for form validation. An example of usage is below and you can learn more about Yup here: https://github.com/jquense/yup
Getting Started
Installing
npm i formal-react-forms
or
yarn add formal-react-forms
Example Usage
Imports
;;
Create a Validation Schema with Yup
const validationSchema = Yupobjectshape firstName: Yup lastName: Yup email: Yup password: Yup confirmPassword: Yup ;
Setup You Initial Values
const initialValues = firstName: "" lastName: "" email: "" password: "" confirmPassword: "";
Create the Function to Call After Form Submit
const onSubmit = { // Make Axios (or equivalent) call // You have access to : // an object with the values from the form values: actions: setIsSubmitting // set state action to update isSubmitting state setErrors; // set state action to update form errors // Examples: // actions.setErrors([newError]); // actions.setIsSubmitting(false); // Convert server returned errors to Yup errors with: const newError = ;};
Example JSX form
<Formal isInitiallyValid=true validationSchema=validationSchema initialValues=initialValues onSubmit= > { return <div> <input type="text" value=valuesfirstName placeholder="First Name" onChange= { ; } /> // See example function below </div> <div> <input type="text" value=valueslastName placeholder="Last Name" onChange= { ; } /> // See example function below </div> <div> <input type="email" value=valuesemail placeholder="Email Address" onChange= { ; } /> // See example function below </div> <div> <input type="password" placeholder="Password" value=valuespassword onChange= /> // See example function below </div> <div> <input type="password" placeholder="Confirm Password" value=valuesconfirmPassword onChange= /> // See example function below </div> <div> <button type="submit" disabled=!isValid> isSubmitting ? "Loading..." : "Submit" </button> </div> ; }</Formal>
Example Error Extractor Function
const getError = field errors: field: string errors: YupValidationError const error = errors; return error ? <span>errormessage</span> : null;;
Authors
- Brian Mullis - https://github.com/bmullis
License
This project is licensed under the MIT License - see the LICENSE.md file for details