obss / react-validatable-form

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

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 ReactValidatableFormProvider
const App = () => {
    return (
        <ReactValidatableFormProvider
            lang={'en'}
            customRules={null}
            translations={null}
            hideBeforeSubmit={true}
            showAfterBlur={true}
            focusToErrorAfterSubmit={true}
            elementFocusHandler={null}
        >
            <Main />
        </ReactValidatableFormProvider>
    );
};

useValidatableForm Hook Usage

import { useValidatableForm } from 'react-validatable-form';

const initialFormData = {};
const rules = [{ path: 'val', ruleSet: [{ rule: 'required' }] }];

const MyComponent = () => {
    const { isValid, formData, setPathValue, 
    setFormIsSubmitted, setPathIsBlurred, getValue, getError } = 
    useValidatableForm({
        rules,
        initialFormData,
    });

    return <>
        <input
            type="text"
            value={getValue('val') || ''}
            onChange={(e) => setPathValue('val', e.target.value)}
            onBlur={() => setPathIsBlurred('val')}
            id="val"
        />
        <div className="errorText">{getError('val') || ' '}</div>
        <div>
            <button onClick={() => setFormIsSubmitted()}>
               Submit Form
            </button>
        </div>
    </>;
};

Examples

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

Contributing

Please review the contributing guide before contributing to the repository.

License

MIT

---