https://github.com/obss/react-validatable-form

React validatable form hook that is used to create dynamic client side validations on react forms
https://github.com/obss/react-validatable-form

hooks react validation validation-library validator

Last synced: 8 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/obss/react-validatable-form
• Owner: obss
• License: mit
• Created: 2021-10-08T18:35:05.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2025-02-07T14:32:06.000Z (11 months ago)
• Last Synced: 2025-05-07T16:15:54.787Z (8 months ago)
• Topics: hooks, react, validation, validation-library, validator
• Language: CSS
• Homepage: https://obss.github.io/react-validatable-form-demo/
• Size: 18.9 MB
• Stars: 23
• Watchers: 3
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# React Validatable Form 

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



---

[![NPM (scoped)](https://img.shields.io/npm/v/react-validatable-form?label=npm%20%7C%20web)](https://www.npmjs.com/package/react-validatable-form)

[![License](https://img.shields.io/github/license/obss/react-validatable-form.svg)](https://github.com/obss/react-validatable-form/blob/master/LICENSE)

[![GitHub contributors](https://img.shields.io/github/contributors/obss/react-validatable-form)](https://github.com/obss/react-validatable-form/graphs/contributors)

[![Github Issues](https://img.shields.io/github/issues/obss/react-validatable-form.svg)](https://github.com/obss/react-validatable-form/issues)

[![Vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/obss/react-validatable-form)](https://github.com/obss/react-validatable-form)

[![Downloads](https://img.shields.io/npm/dw/react-validatable-form.svg)](https://www.npmjs.com/package/react-validatable-form)

[![Bundle Size](https://img.shields.io/bundlephobia/min/react-validatable-form)](https://www.npmjs.com/package/react-validatable-form)

---

## Table of Contents 

-   [Installation](#installation)

-   [Getting Started](#getting-started)

    -   [Setup ReactValidatableFormProvider](#setup-reactvalidatableformprovider)

    -   [useValidatableForm Hook Usage](#usevalidatableform-hook-usage)

-   [Examples](#examples)

-   [Contributing](#contributing)

-   [License](#license)

---

## Installation

**react-validatable-form** requires:

-   React **17.0.2** or later

```shell

yarn add react-validatable-form

```

or

```shell

npm install react-validatable-form

```

## Getting Started

### Setup ReactValidatableFormProvider

Wrap your App inside `ReactValidatableFormProvider`.

```js

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

// Wrap your app inside ReactValidatableFormProvider

const App = () => {

    return (

        

            

        

    );

};

```

### useValidatableForm Hook Usage

```js

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 (

        <>

             setPathValue('val', e.target.value)}

                onBlur={() => setPathIsBlurred('val')}

                id="val"

            />

            
{getError('val') || ' '}

            


                 setFormIsSubmitted()}>Submit Form

            

        >

    );

};

```


## Examples

Checkout live examples on [react-validatable-form-demo](https://obss.github.io/react-validatable-form-demo) page for various customizations.

[Live Examples on StackBlitz](https://stackblitz.com/edit/react-validatable-form)

## Contributing

Please review the [contributing guide](https://github.com/obss/react-validatable-form/blob/master/CONTRIBUTING.md) before contributing to the repository.

## License

MIT

---