react-forming
Validation Wrapper for React input elements
Motivation
Most React validation libraries seem too imperative for me 😄
Quick Start
Installation
npm install --save react-forming // or yarn add react-forming
Usage
; ; Component state = value: email: "" password: "" handleSubmit = async { const response = await ; const result = await response; }; { return <div> <FormWrapper value=thisstatevalue validators= email: email required //You can add as many validation rules for a single input field password: required onChange= { this; } onSubmit=thishandleSubmit children= { } <ReactFragment> <input ... /> <input ... /> <button disabled=disabled></button> </ReactFragment> /> </div> ); }
Validation
- Existing validators are 'not required' by default so you need to explicitly add a required rule For example
Displaying validation errors
; <FormWrapper validators= email: email //The email field becomes validated only if there's an entry confirmEmail: email required //Add the required field for non-empty value validation password: message: "Password must be a least 6 characters long" rule: message: 'Password field is required' rule: required children= { const password = errors; //an array of errors for the validated field return password } />
Type signatures:
// FormWrapper props type boolean; type { value: string void }; value: key: string: string disabled: boolean ReactNode void validators: key: Array<Rule> | Rule
Validation Rules:
- required - Rule
- number - Rule
- phoneNumber - (locale: string) => Rule
- passwordMatch - (otherPassword: string) => Rule
- minLength - (length: number) => Rule
- maxLength - (length: number) => Rule
Creating a validation Rule:
; const newValidationRule = ;
TODO
- Add input components with validation - Radio, Checkbox etc.
- Add more custom validation
- Include testing
- May add support for flow
Contribution
Feel free to fork the repo and create a pr! 😄