Passable-React
Passable-React is a package that allows easy integration with passable validations. It manages the form state itself, leaving you to only care about writing the validations and hooking it all together.
Philosophy
When using passable-react, you let its core component PassableProvider
take control over the state of the form and supply you with different functions and values that allow you connect it to your state. PassableProvider uses the children as a function pattern both for familiarity and flexibility.
Installation
npm install --save passable-react
Usage
// ./App.js;;; initiaFormState = username: 'initial value' password: '' spam: checked: true { return <PassableProvider passes=passes initialFormState=thisinitialFormState> { <form name="myform" onBlur=setTouchedOnEvent onChange=validateOne onSubmit=validateAll> <input type="text" name="username" value=fieldsusernamevalue/> errorsusername && <span>fieldsusernameerrors</span> <input type="password" name="password" value=fieldspasswordvalue/> errorspassword && <span>fieldspassworderrors</span> <input type="checkbox" name="spam" value=fieldsspamvalue checked=fieldsspamchecked/> errorsspam && <span>fieldsspamerrors</span> <input type="submit" value="Submit"/> </form> } </PassableProvider> ; } // ./passes.js; { return ;}
And that's all there is to it. Here is what we did:
- We set our initial form state. It contains the default values for our form fields, including
dirty
andtouched
. - We created a passes file which holds our validation logic.
- We attached both our initial form state and the passes to
PassableProvider
- We grabbed the functions supplied by provider and used them for our onChange and onBlur for the form.
- We used the
fields
object to grab the current value and connect the inputs to the current state. - We added conditional rendering of errors next to each input. They will automatically get added once validation of a field fails.
What else happens here?
- The
validateOnEvent
function both validates a field, and marks it as dirty. setTouchedOnEvent
marks the field astouched
The fields object:
Here is an example of a fields object
fields: checkbox: errors: value: true warnings: radio_input: checked: true errors: value: "yo" warnings: username: dirty: true errors: Array"should be a string between 3 and 10 chars" hasError: true hasWarning: false touched: true value: "An" warnings:
The errors and warnings objects
The errors and warnings objects are simply counters of the amount of errors in each field, saving you the hassle of traversing down the fields object and counting each field manually:
errors: phone: 1 username: 1