React-validatable-form NPM

React Validatable Form

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

Installation

react-validatable-form requires:

React 17.0.2 or later

yarn add react-validatable-form

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>
        </>
    );
};