{"id":19940682,"url":"https://github.com/mohsensami/react-form","last_synced_at":"2026-01-04T15:38:10.705Z","repository":{"id":166756869,"uuid":"620685939","full_name":"mohsensami/react-form","owner":"mohsensami","description":null,"archived":false,"fork":false,"pushed_at":"2024-09-14T19:41:27.000Z","size":585,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-23T01:17:10.522Z","etag":null,"topics":["appwrite","react"],"latest_commit_sha":null,"homepage":"https://chat-sami.netlify.app/","language":"TypeScript","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/mohsensami.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-29T07:09:58.000Z","updated_at":"2024-09-14T19:41:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"fac39e0e-bb90-491c-be38-503fc0f1dfab","html_url":"https://github.com/mohsensami/react-form","commit_stats":null,"previous_names":["mohsensami/react-blog","mohsensami/blog","mohsensami/google-drive-nextjs","mohsensami/react-chat","mohsensami/react-form"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohsensami%2Freact-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohsensami%2Freact-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohsensami%2Freact-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohsensami%2Freact-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mohsensami","download_url":"https://codeload.github.com/mohsensami/react-form/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252210799,"owners_count":21712278,"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":["appwrite","react"],"created_at":"2024-11-13T00:06:24.851Z","updated_at":"2026-01-04T15:38:10.655Z","avatar_url":"https://github.com/mohsensami.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Modal React\n\n## Manual Setup\n\n## Demo\n\n## Installation\n\nTo use the Modal component, you need to have a React environment set up. You can then add the Modal component files to your project.\n\nThe package can be installed via [npm](https://github.com/npm/cli):\n\n```\nnpm install @mohsensami/react-hook-form\n```\n\n## Usage\n\nReact Component:\n\n```javascript\nimport { useForm } from '@mohsensami/react-hook-form';\nimport {\n    requiredValidator,\n    minValidator,\n    maxValidator,\n    emailValidator,\n} from '@mohsensami/react-hook-form/validators/rules';\nimport Input from '@mohsensami/react-hook-form/components/Input.js';\n\nconst [formState, onInputHandler] = useForm(\n    {\n        username: {\n            value: '',\n            isValid: false,\n        },\n        password: {\n            value: '',\n            isValid: false,\n        },\n    },\n    false\n);\n\nreturn (\n    \u003cform action=\"#\" className=\"login-form\"\u003e\n        \u003cdiv className=\"login-form__username\"\u003e\n            \u003cInput\n                className=\"login-form__username-input\"\n                id=\"username\"\n                type=\"text\"\n                placeholder=\"Username\"\n                element=\"input\"\n                validations={[requiredValidator(), minValidator(8), maxValidator(20), emailValidator()]}\n                onInputHandler={onInputHandler}\n            /\u003e\n            \u003ci className=\"login-form__username-icon fa fa-user\"\u003e\u003c/i\u003e\n        \u003c/div\u003e\n        \u003cdiv className=\"login-form__password\"\u003e\n            \u003cInput\n                element=\"input\"\n                id=\"password\"\n                type=\"password\"\n                className=\"login-form__password-input\"\n                placeholder=\"Password\"\n                validations={[requiredValidator(), minValidator(8), maxValidator(18)]}\n                onInputHandler={onInputHandler}\n            /\u003e\n\n            \u003ci className=\"login-form__password-icon fa fa-lock-open\"\u003e\u003c/i\u003e\n        \u003c/div\u003e\n        \u003cbutton\n            className={`login-form__btn ${formState.isFormValid ? 'login-form__btn-success' : 'login-form__btn-error'}`}\n            type=\"submit\"\n            disabled={!formState.isFormValid}\n        \u003e\n            \u003ci className=\"login-form__btn-icon fas fa-sign-out-alt\"\u003e\u003c/i\u003e\n            \u003cspan className=\"login-form__btn-text\"\u003eورود\u003c/span\u003e\n        \u003c/button\u003e\n    \u003c/form\u003e\n);\n```\n\n## Props\n\n## Authors\n\n-   [@mohsensami](https://github.com/mohsensami)\n\n## Contributing\n\nIf you want to contribute to this project and make it better, your help is very welcome. Create an issue or submit a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohsensami%2Freact-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohsensami%2Freact-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohsensami%2Freact-form/lists"}