{"id":13880970,"url":"https://github.com/react-hook-form/strictly-typed","last_synced_at":"2025-07-16T17:31:31.093Z","repository":{"id":38174263,"uuid":"265150704","full_name":"react-hook-form/strictly-typed","owner":"react-hook-form","description":"📋 V6 - Strictly typed Controller","archived":true,"fork":false,"pushed_at":"2022-06-10T00:50:01.000Z","size":608,"stargazers_count":59,"open_issues_count":25,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-09T16:27:51.731Z","etag":null,"topics":["forms","input-validation","strictly-typed","typescript"],"latest_commit_sha":null,"homepage":"https://react-hook-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/react-hook-form.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}},"created_at":"2020-05-19T05:07:17.000Z","updated_at":"2025-06-25T15:59:49.000Z","dependencies_parsed_at":"2022-08-22T23:40:09.258Z","dependency_job_id":null,"html_url":"https://github.com/react-hook-form/strictly-typed","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/react-hook-form/strictly-typed","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-hook-form%2Fstrictly-typed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-hook-form%2Fstrictly-typed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-hook-form%2Fstrictly-typed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-hook-form%2Fstrictly-typed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-hook-form","download_url":"https://codeload.github.com/react-hook-form/strictly-typed/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-hook-form%2Fstrictly-typed/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265237653,"owners_count":23732514,"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":["forms","input-validation","strictly-typed","typescript"],"created_at":"2024-08-06T08:03:43.095Z","updated_at":"2025-07-16T17:31:30.539Z","avatar_url":"https://github.com/react-hook-form.png","language":"TypeScript","funding_links":["https://opencollective.com/react-hook-form","https://opencollective.com/react-hook-form/contribute"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cp align=\"center\"\u003e\n        \u003ca href=\"https://react-hook-form.com\" title=\"React Hook Form - Simple React forms validation\"\u003e\n            \u003cimg src=\"https://raw.githubusercontent.com/bluebill1049/react-hook-form/master/docs/logo.png\" alt=\"React Hook Form Logo - React hook custom hook for form validation\" /\u003e\n        \u003c/a\u003e\n    \u003c/p\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003ePerformant, flexible and extensible forms with easy to use validation.\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![npm downloads](https://img.shields.io/npm/dm/@hookform/strictly-typed.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/strictly-typed)\n[![npm](https://img.shields.io/npm/dt/@hookform/strictly-typed.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/strictly-typed)\n[![npm](https://img.shields.io/bundlephobia/minzip/@hookform/strictly-typed?style=for-the-badge)](https://bundlephobia.com/result?p=@hookform/strictly-typed)\n\n\u003c/div\u003e\n\n## Goal\n\nReact Hook Form strictly typed custom hooks.\n\n## Install\n\n```\n$ npm install @hookform/strictly-typed\n```\n\n## Quickstart\n\n```tsx\nimport { useTypedController } from '@hookform/strictly-typed';\nimport { useForm } from 'react-hook-form';\nimport { TextField, Checkbox } from '@material-ui/core';\n\ntype FormValues = {\n  flat: string;\n  nested: {\n    object: { test: string };\n    array: { test: boolean }[];\n  };\n};\n\nexport default function App() {\n  const { control, handleSubmit } = useForm\u003cFormValues\u003e();\n  const TypedController = useTypedController\u003cFormValues\u003e({ control });\n\n  const onSubmit = handleSubmit((data) =\u003e console.log(data));\n\n  return (\n    \u003cform onSubmit={onSubmit}\u003e\n      \u003cTypedController\n        name=\"flat\"\n        defaultValue=\"\"\n        render={(props) =\u003e \u003cTextField {...props} /\u003e}\n      /\u003e\n\n      \u003cTypedController\n        as=\"textarea\"\n        name={['nested', 'object', 'test']}\n        defaultValue=\"\"\n        rules={{ required: true }}\n      /\u003e\n\n      \u003cTypedController\n        name={['nested', 'array', 0, 'test']}\n        defaultValue={false}\n        render={(props) =\u003e \u003cCheckbox {...props} /\u003e}\n      /\u003e\n\n      {/* ❌: Type '\"notExists\"' is not assignable to type 'DeepPath\u003cFormValues, \"notExists\"\u003e'. */}\n      \u003cTypedController as=\"input\" name=\"notExists\" defaultValue=\"\" /\u003e\n\n      {/* ❌: Type 'number' is not assignable to type 'string | undefined'. */}\n      \u003cTypedController\n        as=\"input\"\n        name={['nested', 'object', 0, 'notExists']}\n        defaultValue=\"\"\n      /\u003e\n\n      {/* ❌: Type 'true' is not assignable to type 'string | undefined'. */}\n      \u003cTypedController as=\"input\" name=\"flat\" defaultValue={true} /\u003e\n\n      \u003cinput type=\"submit\" /\u003e\n    \u003c/form\u003e\n  );\n}\n```\n\n[![Edit React Hook Form - useTypedController](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-hook-form-usetypedcontroller-23qv1?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## Name Reference\n\n| Field Path          | Field Name   |\n| :------------------ | :----------- |\n| `foo`               | `foo`        |\n| `['foo', 'bar']`    | `foo.bar`    |\n| `['foo', 0]`        | `foo[0]`     |\n| `['foo', '0']`      | `foo.0`      |\n| `['foo', 1]`        | `foo[1]`     |\n| `['foo', 0, 'bar']` | `foo[0].bar` |\n| `['foo']`           | `foo`        |\n| `['foo', 'bar']`    | `foo.bar`    |\n| `['foo', 'bar', 0]` | `foo.bar[0]` |\n\n## API\n\n- useTypedController\n\n| Name      | Type     | Required |\n| :-------- | :------- | :------- |\n| `control` | `Object` |          |\n\n- TypedController\n\n| Name           | Type                                          | Required |\n| :------------- | :-------------------------------------------- | :------- |\n| `name`         | `string \\| [string, ...(string \\| number)[]]` | ✓        |\n| `as`           | `'input' \\| 'select' \\| 'textarea'`           |          |\n| `render`       | `Function`                                    |          |\n| `defaultValue` | `DeepPathValue`                               |          |\n| `rules`        | `Object`                                      |          |\n| `onFocus`      | `() =\u003e void`                                  |          |\n\n## Backers\n\nThanks goes to all our backers! [[Become a backer](https://opencollective.com/react-hook-form#backer)].\n\n\u003ca href=\"https://opencollective.com/react-hook-form#backers\"\u003e\n    \u003cimg src=\"https://opencollective.com/react-hook-form/backers.svg?width=950\" /\u003e\n\u003c/a\u003e\n\n## Organizations\n\nThanks goes to these wonderful organizations! [[Contribute](https://opencollective.com/react-hook-form/contribute)].\n\n\u003ca href=\"https://github.com/react-hook-form/react-hook-form/graphs/contributors\"\u003e\n    \u003cimg src=\"https://opencollective.com/react-hook-form/organizations.svg?width=950\" /\u003e\n\u003c/a\u003e\n\n## Contributors\n\nThanks goes to these wonderful people! [[Become a contributor](CONTRIBUTING.md)].\n\n\u003ca href=\"https://github.com/react-hook-form/react-hook-form/graphs/contributors\"\u003e\n    \u003cimg src=\"https://opencollective.com/react-hook-form/contributors.svg?width=950\" /\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-hook-form%2Fstrictly-typed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-hook-form%2Fstrictly-typed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-hook-form%2Fstrictly-typed/lists"}