React Validatable Form

React validatable form hook that is used to create dynamic client side validations on React forms.

---

---

Table of Contents

• Installation

• Getting Started

  • Setup ReactValidatableFormProvider
  • useValidatableForm Hook Usage

• Examples

• Contributing

• License

---

Installation

react-validatable-form requires:

• React 17.0.2 or later

yarn add react-validatable-form

or

npm install react-validatable-form

Getting Started

Setup ReactValidatableFormProvider

Wrap your App inside ReactValidatableFormProvider.

import{ReactValidatableFormProvider}from'react-validatable-form';// Wrap your app inside ReactValidatableFormProviderconstApp=()=>{return(<ReactValidatableFormProviderlang={'en'}customRules={null}translations={null}hideBeforeSubmit={true}showAfterBlur={true}focusToErrorAfterSubmit={true}elementFocusHandler={null}><Main/></ReactValidatableFormProvider>);};

useValidatableForm Hook Usage

import{useValidatableForm}from'react-validatable-form';constinitialFormData={};construles=[{path: 'val',ruleSet: [{rule: 'required'}]}];constMyComponent=()=>{const{ isValid, formData, setPathValue, setFormIsSubmitted, setPathIsBlurred, getValue, getError }=useValidatableForm({
rules,
initialFormData,});return(<><inputtype="text"value={getValue('val')||''}onChange={(e)=>setPathValue('val',e.target.value)}onBlur={()=>setPathIsBlurred('val')}id="val"/><divclassName="errorText">{getError('val')||' '}</div><div><buttononClick={()=>setFormIsSubmitted()}>Submit Form</button></div></>);};

Examples

Checkout live examples on react-validatable-form-demo page for various customizations.

Live Examples on StackBlitz

Contributing

Please review the contributing guide before contributing to the repository.

License

MIT

---