{"id":13469646,"url":"https://github.com/react-hook-form/error-message","last_synced_at":"2025-04-08T11:12:42.235Z","repository":{"id":38358261,"uuid":"223832035","full_name":"react-hook-form/error-message","owner":"react-hook-form","description":"📋 Error message component","archived":false,"fork":false,"pushed_at":"2023-09-09T16:07:42.000Z","size":1963,"stargazers_count":345,"open_issues_count":16,"forks_count":15,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-29T21:05:46.569Z","etag":null,"topics":["component","error-handling","error-messages","errormessage","forms","message","react"],"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":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-11-25T00:37:05.000Z","updated_at":"2024-10-03T20:49:55.000Z","dependencies_parsed_at":"2023-02-07T02:51:46.522Z","dependency_job_id":null,"html_url":"https://github.com/react-hook-form/error-message","commit_stats":{"total_commits":85,"total_committers":9,"mean_commits":9.444444444444445,"dds":"0.44705882352941173","last_synced_commit":"58378b86567112cec9fa23dbc0440bf7543e2d31"},"previous_names":["react-hook-form/react-hook-form-error"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-hook-form%2Ferror-message","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-hook-form%2Ferror-message/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-hook-form%2Ferror-message/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-hook-form%2Ferror-message/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-hook-form","download_url":"https://codeload.github.com/react-hook-form/error-message/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247535516,"owners_count":20954576,"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":["component","error-handling","error-messages","errormessage","forms","message","react"],"created_at":"2024-07-31T15:01:48.364Z","updated_at":"2025-04-08T11:12:42.203Z","avatar_url":"https://github.com/react-hook-form.png","language":"TypeScript","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/error-message.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/error-message)\n[![npm](https://img.shields.io/npm/dt/@hookform/error-message.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/error-message)\n[![npm](https://img.shields.io/bundlephobia/minzip/@hookform/error-message?style=for-the-badge)](https://bundlephobia.com/result?p=@hookform/error-message)\n\n\u003c/div\u003e\n\n## Goal\n\nA simple component to render associated input's error message.\n\n## Install\n\n```\n$ npm install @hookform/error-message\n```\n\n## Quickstart\n\n- Single Error Message\n\n```jsx\nimport React from 'react';\nimport { useForm } from 'react-hook-form';\nimport { ErrorMessage } from '@hookform/error-message';\n\nexport default function App() {\n  const { register, formState: { errors }, handleSubmit } = useForm();\n  const onSubmit = (data) =\u003e console.log(data);\n\n  return (\n    \u003cform onSubmit={handleSubmit(onSubmit)}\u003e\n      \u003cinput\n        name=\"singleErrorInput\"\n        ref={register({ required: 'This is required.' })}\n      /\u003e\n      \u003cErrorMessage errors={errors} name=\"singleErrorInput\" /\u003e\n\n      \u003cErrorMessage\n        errors={errors}\n        name=\"singleErrorInput\"\n        render={({ message }) =\u003e \u003cp\u003e{message}\u003c/p\u003e}\n      /\u003e\n\n      \u003cinput name=\"name\" ref={register({ required: true })} /\u003e\n      \u003cErrorMessage errors={errors} name=\"name\" message=\"This is required\" /\u003e\n\n      \u003cinput type=\"submit\" /\u003e\n    \u003c/form\u003e\n  );\n}\n```\n\n---\n\n- Multiple Error Messages\n\n```jsx\nimport React from 'react';\nimport { useForm } from 'react-hook-form';\nimport { ErrorMessage } from '@hookform/error-message';\n\nexport default function App() {\n  const { register, formState: { errors }, handleSubmit } = useForm({\n    criteriaMode: 'all',\n  });\n  const onSubmit = (data) =\u003e console.log(data);\n\n  return (\n    \u003cform onSubmit={handleSubmit(onSubmit)}\u003e\n      \u003cinput\n        name=\"multipleErrorInput\"\n        ref={register({\n          required: 'This is required.',\n          pattern: {\n            value: /d+/,\n            message: 'This input is number only.',\n          },\n          maxLength: {\n            value: 10,\n            message: 'This input exceed maxLength.',\n          },\n        })}\n      /\u003e\n      \u003cErrorMessage\n        errors={errors}\n        name=\"multipleErrorInput\"\n        render={({ messages }) =\u003e\n          messages \u0026\u0026\n          Object.entries(messages).map(([type, message]) =\u003e (\n            \u003cp key={type}\u003e{message}\u003c/p\u003e\n          ))\n        }\n      /\u003e\n\n      \u003cinput type=\"submit\" /\u003e\n    \u003c/form\u003e\n  );\n}\n```\n\n## API\n\n| Prop      | Type                                                  | Required | Description                                                                                                                                                                               |\n| :-------- | :---------------------------------------------------- | :------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `name`    | `string`                                              |    ✓     | Associated field name.                                                                                                                                                                    |\n| `errors`  | `object`                                              |          | `errors` object from React Hook Form. It's optional if you are using `FormProvider`.                                                                                                      |\n| `message` | `string \\| React.ReactElement`                        |          | inline error message.                                                                                                                                                                     |\n| `as`      | `string \\| React.ReactElement \\| React.ComponentType` |          | Wrapper component or HTML tag. eg: `as=\"p\"`, `as={\u003cp /\u003e}` or `as={CustomComponent}`. This prop is incompatible with prop `render` and will take precedence over it.                    |\n| `render`  | `Function`                                            |          | This is a [render prop](https://reactjs.org/docs/render-props.html) for rendering error message or messages. \u003cbr\u003e\u003cb\u003eNote:\u003c/b\u003e you need to set `criteriaMode` to `all` for using messages. |\n\n## Backers\n\nThank 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## 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","funding_links":["https://opencollective.com/react-hook-form"],"categories":["TypeScript","form"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-hook-form%2Ferror-message","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-hook-form%2Ferror-message","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-hook-form%2Ferror-message/lists"}