{"id":21261531,"url":"https://github.com/chenasraf/formplex-react","last_synced_at":"2026-04-24T12:08:15.422Z","repository":{"id":63010137,"uuid":"564492394","full_name":"chenasraf/formplex-react","owner":"chenasraf","description":"Incredibly easy \u0026 flexible React form hooks","archived":false,"fork":false,"pushed_at":"2022-11-16T15:31:23.000Z","size":151,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-09T06:35:54.303Z","etag":null,"topics":["form","react","react-hook","react-hook-form"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/formplex-react","language":"TypeScript","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/chenasraf.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"chenasraf","patreon":null,"open_collective":null,"ko_fi":"casraf","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2022-11-10T20:49:40.000Z","updated_at":"2024-08-25T21:35:51.000Z","dependencies_parsed_at":"2023-01-23T11:15:15.113Z","dependency_job_id":null,"html_url":"https://github.com/chenasraf/formplex-react","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/chenasraf/formplex-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenasraf%2Fformplex-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenasraf%2Fformplex-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenasraf%2Fformplex-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenasraf%2Fformplex-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chenasraf","download_url":"https://codeload.github.com/chenasraf/formplex-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenasraf%2Fformplex-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32222570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T10:26:35.452Z","status":"ssl_error","status_checked_at":"2026-04-24T10:25:27.643Z","response_time":64,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","react","react-hook","react-hook-form"],"created_at":"2024-11-21T04:43:40.474Z","updated_at":"2026-04-24T12:08:15.401Z","avatar_url":"https://github.com/chenasraf.png","language":"TypeScript","funding_links":["https://github.com/sponsors/chenasraf","https://ko-fi.com/casraf","https://ko-fi.com/casraf'"],"categories":[],"sub_categories":[],"readme":"# FormPlex - React\n\n\u003ch2 align=\"center\"\u003e\n\n[GitHub](https://github.com/chenasraf/formplex-react) |\n[Documentation](https://casraf.dev/formplex-react) | [NPM](https://npmjs.com/package/formplex-react)\n| [casraf.dev](https://casraf.dev)\n\n\u003c/h2\u003e\n\nHandle forms in your React apps with incredible ease.\n\nFormPlex lets you use React forms without the hassle; including easy validations, predictable and\nsimple usage \u0026 API, and great flexibility.\n\n## Quick-start\n\nSee the [full documentation](https://chenasraf.github.io/formplex-react/) for all the available\noptions, return values and more examples.\n\n### Use the hook\n\nStart by calling the hook, passing in any options you would like for the form, and get the return\nvalues as needed.\n\nThis is a full example of a hook usage with all the available options and return values. All options\nare optional, see the docs for each for more information.\n\n```tsx\nconst { field, handleSubmit, isValid, errors, state, rawState, dirty, setValue, setValues } =\n  useForm\u003cMyFormData\u003e({\n    initialState: {\n      firstName: 'John',\n      lastName: 'Doe',\n    },\n    autoValidateBehavior: 'onChange',\n    errorMessages: {\n      required: 'This field is required',\n      minLength: (n) =\u003e `Must be more than ${n} chars long`,\n      maxLength: (n) =\u003e `Must be less than ${n} chars long`,\n    },\n    onSubmit(values, e) {\n      console.log('Form submitted:', values)\n      fetch('/submit', { method: 'POST', body: JSON.stringify(values) })\n    },\n  })\n```\n\n### Register an input\n\nUse `field()` from the previous hook on your inputs, should support most input types:\n\n```tsx\n// you can import some built-in validators, or create your own\nimport { validator } from 'formplex-react'\n\n\u003cinput type=\"text\" {...field('firstName', { required: true, minLength: 2 })} /\u003e\n\u003cinput type=\"number\" {...field('age', {\n  required: true,\n  validate: validator.min(18, 'Must be 18 or over'),\n  // You can implement the above validator yourself like this:\n  // validate: (n) =\u003e n \u003c 18 ? \"Must be 18 or over\" : null,\n  parse: Number,\n})} /\u003e\n\u003cselect {...field('gender', { required: true })}\u003e\n  ...\n\u003c/select\u003e\n```\n\n### Full form example\n\nBelow is a full example of a simple form.\n\n```tsx\nimport React from 'react'\nimport { useForm } from 'formplex-react'\n\ninterface MyFormData {\n  companyName: string\n  employeesCount: number\n  revenueRange: '$0-$50K' | '$50-$500K' | '$500K-$1M' | '$1M+'\n}\n\nexport const MyForm: React.FC = () =\u003e {\n  const { field, handleSubmit, isValid, errors } = useForm\u003cMyFormData\u003e({\n    onSubmit(values, e) {\n      console.log('Form submitted:', values)\n      fetch('/submit', { method: 'POST', body: JSON.stringify(values) })\n    },\n  })\n\n  return (\n    \u003cform onSubmit={handleSubmit}\u003e\n      \u003cdiv\u003e\n        \u003cinput\n          type=\"text\"\n          {...field('companyName', {\n            minLength: 5,\n            maxLength: 50,\n            required: true,\n          })}\n        /\u003e\n        {errors.companyName \u0026\u0026 \u003cdiv style={{ color: 'red' }}\u003e{errors.companyName.message}\u003c/div\u003e}\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        \u003cinput\n          type=\"number\"\n          {...field('employeesCount', {\n            parse: Number,\n            pattern: /^\\d+$/,\n            required: true,\n            validate: (n) =\u003e (n \u003c 1 ? 'Must have at least 1 employee.' : null),\n          })}\n        /\u003e\n        {errors.employeesCount \u0026\u0026 (\n          \u003cdiv style={{ color: 'red' }}\u003e{errors.employeesCount.message}\u003c/div\u003e\n        )}\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        \u003cselect {...field('revenueRange', { required: true })}\u003e\n          \u003coption value=\"$0-$50K\"\u003e$0-$50K\u003c/option\u003e\n          \u003coption value=\"$50-$500K\"\u003e$50-$500K\u003c/option\u003e\n          \u003coption value=\"$500K-$1M\"\u003e$500K-$1M\u003c/option\u003e\n          \u003coption value=\"$1M+\"\u003e$1M+\u003c/option\u003e\n        \u003c/select\u003e\n        {errors.revenueRange \u0026\u0026 \u003cdiv style={{ color: 'red' }}\u003e{errors.revenueRange.message}\u003c/div\u003e}\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        \u003cbutton type=\"submit\" disabled={!isValid}\u003e\n          Save\n        \u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/form\u003e\n  )\n}\n```\n\n### Tips\n\n- You normally don't need to use `state` to return the values of the form, you can use `onSubmit`\n  for most use-cases; however it is available when you need it.\n- Use `setValue` or `setValues` when you manually need to change input values.\n- You can check for the existence of each field inside `errors` to know if there are any errors on\n  that field. You can then check the type and message of said error if it exists.\n\n## Contributing\n\nI am developing this package on my free time, so any support, whether code, issues, or just stars is\nvery helpful to sustaining its life. If you are feeling incredibly generous and would like to donate\njust a small amount to help sustain this project, I would be very very thankful!\n\n\u003ca href='https://ko-fi.com/casraf' target='_blank'\u003e\n  \u003cimg height='36' style='border:0px;height:36px;'\n    src='https://cdn.ko-fi.com/cdn/kofi1.png?v=3'\n    alt='Buy Me a Coffee at ko-fi.com' /\u003e\n\u003c/a\u003e\n\nI welcome any issues or pull requests on GitHub. If you find a bug, or would like a new feature,\ndon't hesitate to open an appropriate issue and I will do my best to reply promptly.\n\nIf you are a developer and want to contribute code, here are some starting tips:\n\n1. Fork this repository\n2. Run `yarn install`\n3. Run `yarn start` to start file watch mode\n4. Make any changes you would like\n5. Create tests for your changes\n6. Update the relevant documentation (readme, code comments, type comments)\n7. Create a PR on upstream\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenasraf%2Fformplex-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchenasraf%2Fformplex-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenasraf%2Fformplex-react/lists"}