{"id":13455231,"url":"https://github.com/iway1/react-ts-form","last_synced_at":"2025-05-14T13:06:06.123Z","repository":{"id":65248383,"uuid":"582113550","full_name":"iway1/react-ts-form","owner":"iway1","description":null,"archived":false,"fork":false,"pushed_at":"2023-09-08T16:52:17.000Z","size":1331,"stargazers_count":2053,"open_issues_count":29,"forks_count":43,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-19T09:24:08.583Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react-ts-form.com","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/iway1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-12-25T18:24:00.000Z","updated_at":"2025-04-13T12:29:21.000Z","dependencies_parsed_at":"2024-01-13T17:47:47.693Z","dependency_job_id":"8c1b3288-1795-4ed5-9b4a-52c1dcd43ac6","html_url":"https://github.com/iway1/react-ts-form","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iway1%2Freact-ts-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iway1%2Freact-ts-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iway1%2Freact-ts-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iway1%2Freact-ts-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iway1","download_url":"https://codeload.github.com/iway1/react-ts-form/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149948,"owners_count":22022851,"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":[],"created_at":"2024-07-31T08:01:02.735Z","updated_at":"2025-05-14T13:06:06.091Z","avatar_url":"https://github.com/iway1.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","**1. Libraries**"],"sub_categories":["Web"],"readme":"![banner](https://user-images.githubusercontent.com/12774588/210178528-2eb928f9-fbad-414b-9f69-a57550d05363.png)\n\n\u003cp align=\"center\"\u003eBuild maintainable, typesafe forms faster 🏃💨\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \n  \u003cimg src=\"https://user-images.githubusercontent.com/12774588/210157220-e287cfdf-c26f-4169-a944-ac147cb4b058.gif\"/\u003e\n\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cb\u003e@ts-react/form\u003c/b\u003e handles the boilerplate involved when building forms using \u003cb\u003ezod\u003c/b\u003e and \u003cb\u003ereact-hook-form\u003c/b\u003e without\u0026nbsp;sacrificing\u0026nbsp;customizability. \n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n\u003ca href=\"\"\u003e [![codecov](https://codecov.io/github/iway1/react-ts-form/branch/main/graph/badge.svg?token=U4UFRGI3HF)](https://codecov.io/github/iway1/react-ts-form) [![Twitter](https://img.shields.io/twitter/url/https/twitter.com/isaac_ts_way.svg?style=social\u0026label=Follow%20%40isaac_ts_way)](https://twitter.com/isaac_ts_way)\u003c/a\u003e\n\n\u003c/div\u003e\n\n# Features\n\n- 🥹 Automatically generate typesafe forms with `zod` schemas\n- 📎 Eliminate repetitive jsx and zod/rhf boilerplate\n- 🎮 Full control of components via [typesafe props](#typesafe-props)\n- 🤯 Headless UI that can render any react component\n- ❤️ [Quality Of Life / Productivity](#qol) features not feasible in vanilla `zod` and `react-hook-form`\n- 🤌🏻 Very tiny utility library (~3kb gzipped)\n- 👀 Great test coverage\n\n[Docs](https://react-ts-form.com/)\n\n[Input Field Examples](field-examples.md)\n\n# Quick Start\n\n## Installation\n\nMake sure you have `\"strict\": true` in your tsconfig.json compilerOptions and make sure you set your editors [typescript version to v4.9](#typescript-versions) (or intellisense won't be as reliable).\n\nInstall package and dependencies with your preferred package manager:\n\n```sh\nyarn add @ts-react/form\n\n# required peer dependencies\nyarn add zod react-hook-form @hookform/resolvers\n```\n\n## Usage\n\nCreate a zod-to-component mapping to map zod schemas to your components then create your form with `createTsForm` (typically once per project):\n\n```tsx\n// create the mapping\nconst mapping = [\n  [z.string(), TextField],\n  [z.boolean(), CheckBoxField],\n  [z.number(), NumberField],\n] as const; // 👈 `as const` is necessary\n\n// A typesafe React component\nconst MyForm = createTsForm(mapping);\n```\n\nNow just create form schemas with zod and pass them to your form:\n\n```tsx\nconst SignUpSchema = z.object({\n  email: z.string().email(\"Enter a real email please.\"), // renders TextField\n  password: z.string(),\n  address: z.string(),\n  favoriteColor: z.enum([\"blue\", \"red\", \"purple\"]), // renders DropDownSelect and passed the enum values\n  isOver18: z.boolean(), // renders CheckBoxField\n});\n\nfunction MyPage() {\n  function onSubmit(data: z.infer\u003ctypeof SignUpSchema\u003e) {\n    // gets typesafe data when form is submitted\n  }\n\n  return (\n    \u003cMyForm\n      schema={SignUpSchema}\n      onSubmit={onSubmit}\n      renderAfter={() =\u003e \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e}\n      // optional typesafe props forwarded to your components\n      props={{\n        email: {\n          className: \"mt-2\",\n        },\n      }}\n    /\u003e\n  );\n}\n```\n\nThat's it! Adding a new field to your form just means adding an additional property to the schema.\n\nIt's recommended but not required that you create a custom [form component](#customizing-form-components) to handle repetitive stuff (like rendering the submit button).\n\n## Full Documentation\n\nYou can read the full docs [here](https://react-ts-form.com)\n\n## TypeScript versions\n\nOlder versions of typescript have worse intellisense and may not show an error in your editor. Make sure your editors typescript version is set to v4.9 plus. The easiest approach is to upgrade your typescript globally if you haven't recently:\n\n```sh\nsudo npm -g upgrade typescript\n```\n\nOr, in VSCode you can do (Command + Shift + P) and search for \"Select Typescript Version\" to change your editors Typescript Version:\n\n![Screenshot 2023-01-01 at 10 55 11 AM](https://user-images.githubusercontent.com/12774588/210178740-edafa8d1-5a69-4e36-8852-c0a01f36c35d.png)\n\nNote that you can still compile with older versions of typescript and the type checking will work.\n\n## Limitations\n\n- Doesn't support class components\n- `@ts-react/form` does not yet support \"dependent field props\", meaning you can't change one field component based on the value of another, but it's a feature we plan on adding soon.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiway1%2Freact-ts-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiway1%2Freact-ts-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiway1%2Freact-ts-form/lists"}