Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/react-hook-form/error-message
📋 Error message component
https://github.com/react-hook-form/error-message
component error-handling error-messages errormessage forms message react
Last synced: 4 months ago
JSON representation
📋 Error message component
- Host: GitHub
- URL: https://github.com/react-hook-form/error-message
- Owner: react-hook-form
- License: mit
- Created: 2019-11-25T00:37:05.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-09-09T16:07:42.000Z (10 months ago)
- Last Synced: 2024-01-15T09:48:05.128Z (6 months ago)
- Topics: component, error-handling, error-messages, errormessage, forms, message, react
- Language: TypeScript
- Homepage: https://react-hook-form.com
- Size: 1.87 MB
- Stars: 330
- Watchers: 4
- Forks: 37
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- awesome-stars - error-message - hook-form | 340 | (TypeScript)
- awesome-headless-ui - @hookform/error-message - 📋 Error message component (form)
- awesome-stars - react-hook-form/error-message - 📋 Error message component (TypeScript)
README
Performant, flexible and extensible forms with easy to use validation.
[](https://www.npmjs.com/package/@hookform/error-message)
[](https://www.npmjs.com/package/@hookform/error-message)
[](https://bundlephobia.com/result?p=@hookform/error-message)
## Goal
A simple component to render associated input's error message.
## Install
```
$ npm install @hookform/error-message
```
## Quickstart
- Single Error Message
```jsx
import React from 'react';
import { useForm } from 'react-hook-form';
import { ErrorMessage } from '@hookform/error-message';
export default function App() {
const { register, formState: { errors }, handleSubmit } = useForm();
const onSubmit = (data) => console.log(data);
return (
{message}
}
/>
);
}
```
---
- Multiple Error Messages
```jsx
import React from 'react';
import { useForm } from 'react-hook-form';
import { ErrorMessage } from '@hookform/error-message';
export default function App() {
const { register, formState: { errors }, handleSubmit } = useForm({
criteriaMode: 'all',
});
const onSubmit = (data) => console.log(data);
return (
messages &&
Object.entries(messages).map(([type, message]) => (
{message}
))
}
/>
);
}
```
## API
| Prop | Type | Required | Description |
| :-------- | :---------------------------------------------------- | :------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | `string` | ✓ | Associated field name. |
| `errors` | `object` | | `errors` object from React Hook Form. It's optional if you are using `FormProvider`. |
| `message` | `string \| React.ReactElement` | | inline error message. |
| `as` | `string \| React.ReactElement \| React.ComponentType` | | Wrapper component or HTML tag. eg: `as="p"`, `as={
}` or `as={CustomComponent}`. This prop is incompatible with prop `render` and will take precedence over it. |
| `render` | `Function` | | This is a [render prop](https://reactjs.org/docs/render-props.html) for rendering error message or messages.
Note: you need to set `criteriaMode` to `all` for using messages. |
## Backers
Thank goes to all our backers! [[Become a backer](https://opencollective.com/react-hook-form#backer)].
## Contributors
Thanks goes to these wonderful people. [[Become a contributor](CONTRIBUTING.md)].
