{"id":22001469,"url":"https://github.com/itzzmeakhi/react-formsio","last_synced_at":"2025-05-01T10:13:45.137Z","repository":{"id":57354355,"uuid":"294006792","full_name":"itzzmeakhi/react-formsio","owner":"itzzmeakhi","description":"An easy to use and light weight form validation library for React.","archived":false,"fork":false,"pushed_at":"2020-09-20T11:01:18.000Z","size":1307,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-01T10:13:37.564Z","etag":null,"topics":["form-validation","form-validation-react","jsx","react","react-forms","react-formsio","react-hook-forms","react-hooks","reactjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-formsio","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/itzzmeakhi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-09T04:55:58.000Z","updated_at":"2021-11-28T20:58:23.000Z","dependencies_parsed_at":"2022-09-02T13:30:41.425Z","dependency_job_id":null,"html_url":"https://github.com/itzzmeakhi/react-formsio","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itzzmeakhi%2Freact-formsio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itzzmeakhi%2Freact-formsio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itzzmeakhi%2Freact-formsio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itzzmeakhi%2Freact-formsio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itzzmeakhi","download_url":"https://codeload.github.com/itzzmeakhi/react-formsio/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251857020,"owners_count":21655121,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form-validation","form-validation-react","jsx","react","react-forms","react-formsio","react-hook-forms","react-hooks","reactjs"],"created_at":"2024-11-29T23:13:55.975Z","updated_at":"2025-05-01T10:13:45.092Z","avatar_url":"https://github.com/itzzmeakhi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-formsio\n\n[![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)\n\n\nEasy to use, and light weight library for form validations in React.\n\n## Motivation 💪\n\nBefore 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.\n\n## What you can do 🧐\n\n1) Instead of importing a wrapper component for each field, add validations to the traditional HTML fields itself.\n2) Basic validators like `required`, `email`, `maxLength`, `minLength`, and `pattern` can be applied.\n3) In addition to the basic validators, some most used validators like `validMobile`, `validBirthDate`, and `passwordStrength` with customization are applied.\n4) Changes uncontrolled inputs to controlled inputs internally, no need for explicitly chaining an `onchange` event. \n5) Pass validation errors to the form to invalidate individual fields.\n\n## Installation 💻 \n```\nnpm install react-formsio --save\n```\n\n## Usage 👨‍💻\n\n### Adding Validation to the HTML text field!\n```jsx\nimport React from 'react';\nimport './App.css';\n\nimport { useFormsio } from 'react-formsio';\n\nconst App = () =\u003e {\n  const { register, \n\t  formState, \n\t  validationRules, \n\t  isFormValid } = useFormsio();\n  const { userName } = formState;\n\t\n  const handleSubmit = event =\u003e {\n    event.preventDefault();\n  }\n  \n  return(\n    \u003cdiv className = 'App'\u003e\n      \u003cform onSubmit = {handleSubmit} \u003e\n        \u003cinput\n\t  type = 'text'\n\t  name = 'userName'\n\t  ref = { register({\n\t          validators: 'required|minLength:6'\n\t\t}) }\n\t  autoComplete = 'off' /\u003e\n\t  \n\t{ userName?.errors?.required ? \n\t    \u003cp\u003e UserName is required \u003c/p\u003e : null }\n\t{ userName?.errors?.minLength ? \n\t    \u003cp\u003e UserName should be of minimum 6 character's length \u003c/p\u003e : null }\n\n\t\u003cbutton type = 'submit'\u003e Submit \u003c/button\u003e\n      \u003c/form\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App;\n```\n\n## Example \u0026 Demo 🧩\n\n\n[![React Formsio Demo GIF](images/react-formsio-demo.gif)](https://react-formsio.stackblitz.io)\n\n### [Stackblitz Link](https://stackblitz.com/edit/react-formsio?file=src/App.js)\n### [Live Demo](https://react-formsio.stackblitz.io)\n\n\n## More 📖 \n\nSee the [API/Tutorial](/API.md) for more information.\n\n## Bug / Feature Request 📣\n\nIf 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.\n\n\n## License ©️\n\nMIT © [itzzmeakhi](https://github.com/itzzmeakhi)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitzzmeakhi%2Freact-formsio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitzzmeakhi%2Freact-formsio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitzzmeakhi%2Freact-formsio/lists"}