1313[ ![ npm downloads] ( https://img.shields.io/npm/dm/error-message.svg?style=for-the-badge )] ( https://www.npmjs.com/package/@hookform/error-message )
1414[ ![ npm] ( https://img.shields.io/npm/dt/@hookform/error-message.svg?style=for-the-badge )] ( https://www.npmjs.com/package/@hookform/error-message )
1515[ ![ npm] ( https://badgen.net/bundlephobia/minzip/@hookform/error-message?style=for-the-badge )] ( https://bundlephobia.com/result?p=@hookform/error-message )
16- [ ![ Tweet] ( https://img.shields.io/twitter/url/http/shields.io.svg?style=social )] ( https://twitter.com/intent/tweet?text=React+hooks+for+form+validation+without+the+hassle&url=https://github.com/rect-hook-form/error-message )
17- [ ![ Join the community on Spectrum] ( https://withspectrum.github.io/badge/badge.svg )] ( https://spectrum.chat/react-hook-form )
1816
1917</div >
2018
@@ -35,9 +33,9 @@ $ npm install @hookform/error-message
3533[ ![ Edit React Hook Form - ErrorMessage] ( https://codesandbox.io/static/img/play-codesandbox.svg )] ( https://codesandbox.io/s/error-messagemessage-pc2b6?fontsize=14&hidenavigation=1&theme=dark )
3634
3735``` jsx
38- import React from " react" ;
39- import { useForm } from " react-hook-form" ;
40- import { ErrorMessage } from " hookform@error-message" ;
36+ import React from ' react' ;
37+ import { useForm } from ' react-hook-form' ;
38+ import { ErrorMessage } from ' hookform@error-message' ;
4139
4240export default function App () {
4341 const { register , errors , handleSubmit } = useForm ();
@@ -47,7 +45,7 @@ export default function App() {
4745 < form onSubmit= {handleSubmit (onSubmit)}>
4846 < input
4947 name= " singleErrorInput"
50- ref= {register ({ required: " This is required." })}
48+ ref= {register ({ required: ' This is required.' })}
5149 / >
5250 < ErrorMessage errors= {errors} name= " singleErrorInput" / >
5351
@@ -71,13 +69,13 @@ export default function App() {
7169[ ![ Edit React Hook Form - ErrorMessage: multiple error messages] ( https://codesandbox.io/static/img/play-codesandbox.svg )] ( https://codesandbox.io/s/error-messagemessage-multiple-error-messages-cis2m?fontsize=14&hidenavigation=1&theme=dark )
7270
7371``` jsx
74- import React from " react" ;
75- import { useForm } from " react-hook-form" ;
76- import { ErrorMessage } from " @hookform/error-messagee" ;
72+ import React from ' react' ;
73+ import { useForm } from ' react-hook-form' ;
74+ import { ErrorMessage } from ' @hookform/error-messagee' ;
7775
7876export default function App () {
7977 const { register , errors , handleSubmit } = useForm ({
80- validateCriteriaMode: " all" ,
78+ validateCriteriaMode: ' all' ,
8179 });
8280 const onSubmit = (data ) => console .log (data);
8381
@@ -86,14 +84,14 @@ export default function App() {
8684 < input
8785 name= " multipleErrorInput"
8886 ref= {register ({
89- required: " This is required." ,
87+ required: ' This is required.' ,
9088 pattern: {
9189 value: / d+ / ,
92- message: " This input is number only." ,
90+ message: ' This input is number only.' ,
9391 },
9492 maxLength: {
9593 value: 10 ,
96- message: " This input exceed maxLength." ,
94+ message: ' This input exceed maxLength.' ,
9795 },
9896 })}
9997 / >
0 commit comments