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.

Live Examples on StackBlitz

Contributing

Please review the contributing guide before contributing to the repository.

License

MIT