{"id":18350317,"url":"https://github.com/getspooky/reactrix","last_synced_at":"2025-07-31T13:15:09.577Z","repository":{"id":57158229,"uuid":"291254916","full_name":"getspooky/Reactrix","owner":"getspooky","description":"Validate forms in React, without stress 😰","archived":false,"fork":false,"pushed_at":"2020-10-04T21:23:38.000Z","size":598,"stargazers_count":36,"open_issues_count":1,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-14T20:02:27.769Z","etag":null,"topics":["form","form-validation","forms","hackertober-fest-starter","hacktoberfest","lightweight","react","react-components","react-hooks","reactjs","validate","validation","validation-library","validations"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/getspooky.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null}},"created_at":"2020-08-29T11:07:21.000Z","updated_at":"2023-04-15T15:16:46.000Z","dependencies_parsed_at":"2022-08-28T06:12:02.839Z","dependency_job_id":null,"html_url":"https://github.com/getspooky/Reactrix","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getspooky%2FReactrix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getspooky%2FReactrix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getspooky%2FReactrix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getspooky%2FReactrix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/getspooky","download_url":"https://codeload.github.com/getspooky/Reactrix/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247470244,"owners_count":20944143,"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","form-validation","forms","hackertober-fest-starter","hacktoberfest","lightweight","react","react-components","react-hooks","reactjs","validate","validation","validation-library","validations"],"created_at":"2024-11-05T21:26:05.288Z","updated_at":"2025-04-06T10:32:11.265Z","avatar_url":"https://github.com/getspooky.png","language":"JavaScript","readme":"\u003cp style=\"text-align=left;\"\u003e\n\u003cimg src=\"https://drive.google.com/uc?id=1udqnh1K08EzdtdqTSJL2rMhddyUrIc7r\"\u003e\n\u003c/p\u003e\n\n\n\u003cp align=\"left\"\u003e\n\u003cimg alt=\"GitHub version\" src=\"https://img.shields.io/github/v/release/getspooky/Reactrix?style=for-the-badge\"\u003e\n\u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/getspooky/Reactrix?style=for-the-badge\"\u003e\n\u003cimg alt=\"GitHub repo size\" src=\"https://img.shields.io/github/repo-size/getspooky/Reactrix?style=for-the-badge\"\u003e\n\u003cimg alt=\"GitHub issues\" src=\"https://img.shields.io/github/issues/getspooky/Reactrix?style=for-the-badge\"\u003e\n\u003cimg alt=\"GitHub tag (latest by date)\" src=\"https://img.shields.io/github/v/tag/getspooky/Reactrix?style=for-the-badge\"\u003e\n\u003cimg alt=\"node-current\" src=\"https://img.shields.io/node/v/reactrix?style=for-the-badge\"\u003e\n\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dw/reactrix?style=for-the-badge\"\u003e\n\u003c/p\u003e\nValidation is the most important aspect while designing an application. It validates the incoming data. Reactrix provides a convenient method `useValidate` to validate incoming data with a variety of powerful validation rules.\n\n\n\u003e Simple, lightweight model-based validation for React Hooks Inspired by [PHP Framework Laravel's validation](https://laravel.com/)\n\n## Features\n\n- 🤗 Familiar and easy to setup.\n- 🌍 i18n Support and error Messages in different locales.\n- 👊 Written in JavaScript.\n- 🗃 No dependencies.\n\n## 📦 Installation\n\nInstall it with yarn:\n\n```sh\nyarn add reactrix --save\n```\n\nOr with npm:\n\n```sh\nnpm install reactrix --save\n```\n\n## 🏷 Usage\n\nLet's define some validations in React components\n\n```jsx\nimport React, { useState } from 'react';\nimport { useValidate } from 'reactrix';\n// Custom React Component to display messages.\nimport { Alert } from './AlertComponent';\n\nfunction Login(props) {\n  const [data, setData] = useState({});\n  const [msg, setValidator] = useValidate();\n  \n  const handleChange = (event) =\u003e {\n    setData({\n      ...data,\n      [event.target.name]: event.target.value\n    );\n  }\n  \n  const handleSubmit = (event) =\u003e {\n    event.preventDefault();\n    setValidator(data, {\n      email: 'required|email',\n      password: 'required|string'\n    }); \n  }\n   \n    \n  return (\n    \u003cform onSubmit={handleSubmit}\u003e  \n        \u003cdiv className=\"container\"\u003e   \n          \u003clabel\u003eEmail : \u003c/label\u003e   \n          \u003cinput type=\"email\" placeholder=\"Enter Email\" name=\"email\" onChange={handleChange} /\u003e  \n          \u003clabel\u003ePassword : \u003c/label\u003e   \n          \u003cinput type=\"password\" placeholder=\"Enter Password\" name=\"password\" onChange={handleChange} /\u003e  \n          \u003cbutton type=\"submit\" onClick={handleSubmit}\u003eLogin\u003c/button\u003e     \n          Forgot \u003ca href=\"#\"\u003e password? \u003c/a\u003e   \n        \u003c/div\u003e\n        \u003cAlert data={msg} /\u003e\n    \u003c/form\u003e\n  );\n  \n}\n\n```\n\n\u003e 💅 You can use custom react component or ui library like `react-bootstrap` to display error messages.\n\nReactrix  has built-in localization support for validation messages.\nThe default language for Reactrix is `en` in order to set the locale you pass the locale key/code to the localize method:\n\n```js\nconst [msg, setValidator] = useValidate('fr');\n```\n\n## 🌍 Supported Locales\n\nReactrix support `english` and `french` languages. This is visible in the `register` javascript file, which can be found in the `src` directory.\nTherefore, if you want to use multiple languages, you will have to add them to the locale folder. \n\n\u003e All the language files should return an array of keyed strings as shown below.\n\n**Step1** - Create 2 files for languages − Spanish,  German. Save Arabic file at locale/de.json\n\n```json\n{\n  \"messages\": {\n    \"alpha\": \"{{input}} darf nur alphabetische Zeichen enthalten\"\n  }\n}\n```\n\n```json\n{\n  \"messages\": {\n    \"alpha\": \"El campo {{input}} solo debe contener letras\"\n  }\n}\n```\n\n**Step2** - Export spanish and German languages from `src/register.js`\n\n```js\n// export all Reactrix supported locales.\nexport { default as de } from '../locale/german.json';\nexport { default as es } from '../locale/spanish.json';\n```\n\n## 🚦Common Rules \n\nThis is the list of all the rules you can validate form inputs against. When using multiple rules, separate them with a pipe `|`.\n\n\n| Keyword          |      Description                                                                                                | \n|------------------|:----------------------------------------------------------------------------------------------------------------|\n| **Common Validator**                                                                                                               | \n| `alpha`          | Checks if the string contains only letter(a-zA-Z)                                                               | \n| `alphaNum`       | Checks if the string contains only letters and numbers                                                          | \n| `ascii`          | Checks if the string contains ASCII chars only                                                                  | \n| `base32`         | Checks if a string is base32 encoded                                                                            | \n| `base64`         | Checks if a string is base64 encoded                                                                            | \n| `boolean`        | Checks if a value is a boolean                                                                                  | \n| `creditCard`        | Checks if the string is a credit card                                            | \n| `date`           | Checks if a value is a date                                                                                     | \n| `decimal`        | Checks if a value is a decimal                                                                                  | \n| `email`          | Checks if the string is an email                                                                                | \n| `ean`            | Checks if the string is an EAN(European Article Number)                                                           |\n| `jwt`            | check if the string is valid JWT token.                                                        |\n| `function`       | Checks if the object is function                                                                                |  \n| `hexColor`       | Checks if the string is a hexadecimal color                                                                     | \n| `integer`        | Checks if the value is an integer number                                                                        | \n| `ipAddress`      | Checks if the string is an IP (version 4 or 6)                                                                  |\n| `lowercase`      | Checks if the string is lowercase                                                                               | \n| `mimeType`       | Checks if the string matches to a valid [MIME type](https://en.wikipedia.org/wiki/Media_type) format            | \n| `numeric`        | Checks if a value is a number                                                                                   | \n| `object`         | Checks if a value is an object                                                                                  |\n| `octal`          | Checks if a value is an octal                                                                                   |\n| `port`           | Checks if the string is a Port                                                                                  |\n| `postal`         | Checks if the string is a postal code. Supported locales are (`[ 'AD', 'AT', 'AU', 'AZ', 'BE', 'BG', 'BR', 'CA', 'CH', 'CZ', 'DE', 'DK', 'DZ', 'EE', 'ES', 'FI', 'FR', 'GB', 'GR', 'HR', 'HU', 'ID', 'IE' 'IL', 'IN', 'IR', 'IS', 'IT', 'JP', 'KE', 'LI', 'LT', 'LU', 'LV', 'MT', 'MX', 'NL', 'NO', 'NP', 'NZ', 'PL', 'PR', 'PT', 'RO', 'RU', 'SA', 'SE', 'SI', 'TN', 'TW', 'UA', 'US', 'ZA', 'ZM' ]`) or `any`.                                                                  |\n| `string`         | Checks if the string is a string                                                                                |\n| `undefined`      | Checks if the string is undefined                                                                               |\n| `uppercase`      | Checks if the string is uppercase                                                                               |\n| `url`            | Checks if the string is url                                                                                     |\n| **ISO**                                                                                                                            |\n| `ISO31661Alpha2` | Checks if the string is a valid [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) officially assigned country code | \n| `ISO31661Alpha3` | Checks if the string is a valid [ISO 3166-1 alpha-3](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3) officially assigned country code |                                             | \n| **Currency**                                                                                                                           |\n| `bitcoin` | Checks if the string is a valid BTC address                                                                     | \n| `ethereum`| Checks if the string is an Ethereum address using basic regex. Does not validate address checksums              | \n| **Hash**                                                                                                                           |\n| `md4` | Checks if the string is a valid md4 algorithm                                                                              | \n| `md5` | Checks if the string is a valid md5 algorithm                                                                              | \n| `sha1` | Checks if the string is a valid sha1 algorithm                                                                            | \n| `sha256` | Checks if the string is a valid sha256 algorithm                                                                        | \n| `sha384` | Checks if the string is a valid sha384 algorithm                                                                        | \n| `sha512` | Checks if the string is a valid sha512 algorithm                                                                        | \n\n## 📢 Compatibility\n\nThis library uses ES6 Promises so be sure to provide a polyfill for it for the browsers that do not support it.\n\n## 📋 Changelog \n\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\n\n## 📒 Samples\nTake a look on samples in [./sample](simple) for more examples of usages.\n\n## 👨‍💻 Contributing\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n\u003ctable\u003e\u003ctr\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/getspooky\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/37160072?s=460\u0026u=6578a0a9d158c7ecb0afa5e8c9ec13194e736b3e\u0026v=4\" width=\"100px;\" alt=\"Yasser A.Idrissi\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eYasser A.Idrissi\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/getspooky/Reactrix\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#ideas\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"#review\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/tr\u003e\u003c/table\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nYou are welcome to contribute to this project, but before you do, please make sure you read the [contribution guide](CONTRIBUTING.md).\n\n\n## 📝 License\n\nThe `reactrix` Library is open-source software licensed under the [MIT license](https://opensource.org/licenses/MIT).\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgetspooky%2Freactrix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgetspooky%2Freactrix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgetspooky%2Freactrix/lists"}