{"id":23190267,"url":"https://github.com/felipstein/zod-hookform-union-helper","last_synced_at":"2025-08-18T19:31:45.532Z","repository":{"id":204924985,"uuid":"712978683","full_name":"Felipstein/zod-hookform-union-helper","owner":"Felipstein","description":"TypeScript helper library to seamlessly integrate zod discriminated unions with react-hook-form, resolving common type issues.","archived":false,"fork":false,"pushed_at":"2023-11-01T15:57:51.000Z","size":38,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-21T08:38:50.192Z","etag":null,"topics":["form-validation","typescript","typescript-union-errors","union-type-errors","union-type-validation","zod","zod-discriminated-uinon-type","zod-union-issue"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/zod-hookform-union-helper","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/Felipstein.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}},"created_at":"2023-11-01T15:39:53.000Z","updated_at":"2024-02-22T00:00:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"3f5bbdb5-a9ee-4fa4-9d18-f911d2deae8e","html_url":"https://github.com/Felipstein/zod-hookform-union-helper","commit_stats":null,"previous_names":["felipstein/zod-hookform-union-helper"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Felipstein%2Fzod-hookform-union-helper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Felipstein%2Fzod-hookform-union-helper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Felipstein%2Fzod-hookform-union-helper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Felipstein%2Fzod-hookform-union-helper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Felipstein","download_url":"https://codeload.github.com/Felipstein/zod-hookform-union-helper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230268746,"owners_count":18199806,"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-validation","typescript","typescript-union-errors","union-type-errors","union-type-validation","zod","zod-discriminated-uinon-type","zod-union-issue"],"created_at":"2024-12-18T12:13:59.107Z","updated_at":"2024-12-18T12:13:59.640Z","avatar_url":"https://github.com/Felipstein.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `zod-hookform-union-helper`\n\n## Introduction\n\nDevelopers frequently face challenges when integrating `zod` with `react-hook-form`, particularly when working with discriminated unions.\n\n## The Issue\n\nWhen using discriminated unions with `zod` and `react-hook-form`, TypeScript often throws type errors that can be confusing. For instance:\n\nGiven a union type in `zod`:\n\n```typescript\nconst FormCertificateSchemaCertificate = z.discriminatedUnion(\"certificate\", [ ... ]);\n```\n\nAnd when integrating it with `react-hook-form`:\n\n```tsx\n{watch('certificate') === 'birth' \u0026\u0026 (\n    \u003cInput { ...register('birth.name') } errorFeedback={errors.birth?.message} /\u003e\n)}\n```\n\nTypeScript flags an error at `errors.birth?.message`, indicating that `birth` doesn't exist within `errors`. Technically, this is true until `certificate` is set to `birth`. This means even if your component's logic correctly recognizes the `birth` field once `certificate` is set, TypeScript doesn't acknowledge this initially, leading to unnecessary type errors.\n\n## The Solution: `zod-hookform-union-helper`\n\nThe `zod-hookform-union-helper` library leverages TypeScript capabilities to consolidate fragmented error unions into one cohesive type.\n\n### Installation:\n\n```bash\nnpm install zod-hookform-union-helper\n```\n\n### Usage:\n\nThere are two primary ways to implement `zod-hookform-union-helper`:\n\n#### 1. Using the `unifyErrors` function:\n\n```tsx\nimport { useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { unifyErrors } from 'zod-hookform-union-helper'\n\n// ...\n\nconst {\n    formState: { errors },\n} = useForm\u003cFormData\u003e()\n\nconst errorsUnified = unifyErrors(errors) // use errorsUnified in your component\n```\n\n#### 2. Using TypeScript type casting:\n\n```tsx\nimport { useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\n\nimport type { UnifiedErrors } from 'zod-hookform-union-helper'\n\n// ...\n\nconst {\n    formState: { errors },\n} = useForm\u003cFormData\u003e()\n\nconst errorsUnified = errors as UnifiedErrors\u003ctypeof errors\u003e // use errorsUnified in your component\n```\n\n## Examples\n\nRevisiting the scenario described in the \"The Issue\" section:\n\nWithout using `zod-hookform-union-helper`:\n```tsx\n{watch('certificate') === 'birth' \u0026\u0026 (\n    \u003cInput { ...register('birth.name') } errorFeedback={errors.birth?.message} /\u003e\n)}\n```\nWith this setup, TypeScript throws a type error at `errors.birth?.message`.\n\nNow, employing `zod-hookform-union-helper`:\n```tsx\nconst errorsUnified = unifyErrors(errors);\n\n{watch('certificate') === 'birth' \u0026\u0026 (\n    \u003cInput { ...register('birth.name') } errorFeedback={errorsUnified.birth?.message} /\u003e\n)}\n```\nIn this instance, TypeScript acknowledges `errorsUnified.birth?.message` without any issue.\n\n## Requirements\n\n- TypeScript version 3.0 or higher.\n\n## Contributing\n\nFeedback and contributions are welcome! Please open an issue or submit a PR if you have suggestions, improvements, or bug fixes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelipstein%2Fzod-hookform-union-helper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffelipstein%2Fzod-hookform-union-helper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelipstein%2Fzod-hookform-union-helper/lists"}