react-hook-form / Error Message
Licence: mit
π Error message component
Stars: β 129
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Error Message
React Widgets
Polished, feature rich, accessible form inputs built with React
Stars: β 2,236 (+1633.33%)
Mutual labels: component, forms
custom-exception-middleware
Middleware to catch custom or accidental exceptions
Stars: β 30 (-76.74%)
Mutual labels: message, error-handling
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: β 253 (+96.12%)
Mutual labels: component, forms
Toast
To use it in PCL or .NetStandard projects write this line of code : CrossToastPopUp.Current.ShowToastMessage("Message");
Stars: β 51 (-60.47%)
Mutual labels: forms, message
rakered
The open source components from rake.red
Stars: β 28 (-78.29%)
Mutual labels: forms, error-handling
Vue Formulate
β‘οΈ The easiest way to build forms with Vue.
Stars: β 1,947 (+1409.3%)
Mutual labels: error-handling, forms
Snodge
Randomly mutate JSON, XML, HTML forms, text and binary data for fuzz testing
Stars: β 121 (-6.2%)
Mutual labels: forms
React Native Gifted Chat
π¬ The most complete chat UI for React Native
Stars: β 11,339 (+8689.92%)
Mutual labels: component
Cypress React Selector
β‘οΈ cypress plugin to locate react elements by component, props and state
Stars: β 121 (-6.2%)
Mutual labels: component
Vue Push Notification Example
An example repo for using browser push notifications with Vue.js and Firebase
Stars: β 120 (-6.98%)
Mutual labels: message
Nativescript Feedback
π’ Non-blocking textual feedback for your NativeScript app
Stars: β 127 (-1.55%)
Mutual labels: message
Vue Blu
UI Component Library Base on Vue.js(2.x) and Bulma
Stars: β 1,593 (+1134.88%)
Mutual labels: component
Ngx Lite
π¦ A collection of lightweight Angular libraries in a single mono repo
Stars: β 125 (-3.1%)
Mutual labels: component
Vue Create Root
π δΈε°1kbηε°ε·₯ε
·, ζη»δ»Άεζthis.$xxxε½δ»€.
Stars: β 123 (-4.65%)
Mutual labels: component
Vue Prism Component
highlight code using prism.js and vue component
Stars: β 126 (-2.33%)
Mutual labels: component
React Controlled Form
Flexible, Modular & Controlled Forms for React and Redux
Stars: β 121 (-6.2%)
Mutual labels: forms
Container Query
A PostCSS plugin and Javascript runtime combination, which allows you to write container queries in your CSS the same way you would write media queries.
Stars: β 119 (-7.75%)
Mutual labels: component
Form Manager
PHP library to create and validate html forms
Stars: β 124 (-3.88%)
Mutual labels: forms
Property Info
PropertyInfo extracts information about PHP class' properties using metadata of popular sources.
Stars: β 1,747 (+1254.26%)
Mutual labels: component
Performant, flexible and extensible forms with easy to use validation.
Goal
A simple component to render associated input's error message.
Install
$ npm install @hookform/error-message
Quickstart
- Single Error Message
import React from 'react';
import { useForm } from 'react-hook-form';
import { ErrorMessage } from '@hookform/error-message';
export default function App() {
const { register, errors, handleSubmit } = useForm();
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input
name="singleErrorInput"
ref={register({ required: 'This is required.' })}
/>
<ErrorMessage errors={errors} name="singleErrorInput" />
<ErrorMessage
errors={errors}
name="singleErrorInput"
render={({ message }) => <p>{message}</p>}
/>
<input name="name" ref={register({ required: true })} />
<ErrorMessage errors={errors} name="name" message="This is required" />
<input type="submit" />
</form>
);
}
- Multiple Error Messages
import React from 'react';
import { useForm } from 'react-hook-form';
import { ErrorMessage } from '@hookform/error-message';
export default function App() {
const { register, errors, handleSubmit } = useForm({
criteriaMode: 'all',
});
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input
name="multipleErrorInput"
ref={register({
required: 'This is required.',
pattern: {
value: /d+/,
message: 'This input is number only.',
},
maxLength: {
value: 10,
message: 'This input exceed maxLength.',
},
})}
/>
<ErrorMessage
errors={errors}
name="multipleErrorInput"
render={({ messages }) =>
messages &&
Object.entries(messages).map(([type, message]) => (
<p key={type}>{message}</p>
))
}
/>
<input type="submit" />
</form>
);
}
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={<p />} or as={CustomComponent} . This prop is incompatible with prop render and will take precedence over it. |
|
render |
Function |
This is a render prop 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].
Contributors
Thanks goes to these wonderful people. [Become a contributor].
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].