https://github.com/itzzmeakhi/react-formsio

An easy to use and light weight form validation library for React.
https://github.com/itzzmeakhi/react-formsio

form-validation form-validation-react jsx react react-forms react-formsio react-hook-forms react-hooks reactjs

Last synced: 27 days ago
JSON representation

An easy to use and light weight form validation library for React.

• Host: GitHub
• URL: https://github.com/itzzmeakhi/react-formsio
• Owner: itzzmeakhi
• Created: 2020-09-09T04:55:58.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-09-20T11:01:18.000Z (over 4 years ago)
• Last Synced: 2024-11-20T19:04:12.952Z (about 1 month ago)
• Topics: form-validation, form-validation-react, jsx, react, react-forms, react-formsio, react-hook-forms, react-hooks, reactjs
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-formsio
• Size: 1.25 MB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-formsio

[![npm](https://img.shields.io/npm/v/react-formsio)](https://www.npmjs.com/package/react-formsio)   [![GitHub issues](https://img.shields.io/github/issues/itzzmeakhi/react-formsio)](https://github.com/itzzmeakhi/react-formsio/issues) ![npm](https://img.shields.io/npm/dt/react-formsio) ![GitHub contributors](https://img.shields.io/github/contributors/itzzmeakhi/react-formsio) [![GitHub last commit](https://img.shields.io/github/last-commit/itzzmeakhi/react-formsio)](https://github.com/itzzmeakhi/react-formsio) [![Twitter Follow](https://img.shields.io/twitter/follow/itzzmeakhi?style=social)](https://twitter.com/itzzmeakhi)

Easy to use, and light weight library for form validations in React.

## Motivation 💪

Before jumping to React, I was an Angular Developer. While I was learning React, I was like, "Oh!  Angular kind of validating forms is missing in React", and the result is this library.

## What you can do 🧐

1) Instead of importing a wrapper component for each field, add validations to the traditional HTML fields itself.

2) Basic validators like `required`, `email`, `maxLength`, `minLength`, and `pattern` can be applied.

3) In addition to the basic validators, some most used validators like `validMobile`, `validBirthDate`, and `passwordStrength` with customization are applied.

4) Changes uncontrolled inputs to controlled inputs internally, no need for explicitly chaining an `onchange` event. 

5) Pass validation errors to the form to invalidate individual fields.

## Installation 💻 

```

npm install react-formsio --save

```

## Usage 👨‍💻

### Adding Validation to the HTML text field!

```jsx

import React from 'react';

import './App.css';

import { useFormsio } from 'react-formsio';

const App = () => {

  const { register, 

	  formState, 

	  validationRules, 

	  isFormValid } = useFormsio();

  const { userName } = formState;

	

  const handleSubmit = event => {

    event.preventDefault();

  }

  

  return(

    


      

        

	  

	{ userName?.errors?.required ? 

	    
 UserName is required 
 : null }

	{ userName?.errors?.minLength ? 

	    
 UserName should be of minimum 6 character's length 
 : null }


	 Submit 

      

    

  )

}


export default App;

```

## Example & Demo 🧩

[![React Formsio Demo GIF](images/react-formsio-demo.gif)](https://react-formsio.stackblitz.io)

### [Stackblitz Link](https://stackblitz.com/edit/react-formsio?file=src/App.js)

### [Live Demo](https://react-formsio.stackblitz.io)

## More 📖 

See the [API/Tutorial](/API.md) for more information.

## Bug / Feature Request 📣

If you find a bug or you'd like to request a new function, kindly open an issue [here](https://github.com/itzzmeakhi/react-formsio/issues/new). Please include your queries and their expected results.

## License ©️

MIT © [itzzmeakhi](https://github.com/itzzmeakhi)