Skip to content

Commit 693d486

Browse files
kotarella1110kotarella1110
authored
@hookform/error-message (#7)
* update current ErrorMessage * update README * update react-hook-form v6 * update peerDeps react-hook-form v6 * update ErrorMessage component * rename react-hook-form-error to @hookform/error-message * update README.md * update settings * update README.md * update README.md * update eslint setting * update ErrorMessage * fix umd global name * fix peerDeps * update README.md * fix types * update keyword * update workflow * update workflow * separate prettier config * change umd name from HookFormErrorMessage to ReactHookFormErrorMessage * remove spectrum and twitter badge * improve npm-scripts * update README.md * fix version
1 parent b3a4546 commit 693d486

21 files changed

+3242
-2963
lines changed

‎.eslintignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/node_modules
2+
/dist
3+
/esm
4+
/coverage
5+
!.*.js

‎.eslintrc.js‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,28 @@
11
module.exports = {
22
parser: '@typescript-eslint/parser',
3+
plugins: ['@typescript-eslint', 'react-hooks'],
34
extends: [
4-
'plugin:@typescript-eslint/recommended',
55
'plugin:react/recommended',
6+
'plugin:@typescript-eslint/recommended',
7+
'prettier/@typescript-eslint',
8+
'plugin:prettier/recommended',
69
],
10+
parser: '@typescript-eslint/parser',
711
parserOptions: {
8-
ecmaVersion: 2018,
12+
ecmaVersion: 2020,
913
sourceType: 'module',
14+
ecmaFeatures: {
15+
jsx: true,
16+
},
1017
},
11-
plugins: ['react-hooks'],
1218
rules: {
13-
curly: 'error',
14-
'@typescript-eslint/indent': 'off',
15-
'@typescript-eslint/no-non-null-assertion': 'off',
1619
'@typescript-eslint/no-explicit-any': 'off',
17-
'@typescript-eslint/explicit-function-return-type': 'off',
18-
'@typescript-eslint/no-object-literal-type-assertion': 'off',
19-
'react-hooks/rules-of-hooks': 'error',
20-
'react-hooks/exhaustive-deps': 'error',
21-
'@typescript-eslint/ban-ts-ignore': 'warn',
20+
'@typescript-eslint/ban-types': 'off',
21+
'@typescript-eslint/explicit-module-boundary-types': 'off',
2222
},
2323
settings: {
2424
react: {
25-
pragma: 'React',
26-
version: '16.9',
25+
version: 'detect',
2726
},
2827
},
2928
};

‎.github/workflows/blank.yml‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎.github/workflows/main.yml‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
name: CI
2+
on: [push]
3+
jobs:
4+
build:
5+
runs-on: ubuntu-latest
6+
strategy:
7+
matrix:
8+
node-version: [12.x]
9+
steps:
10+
- uses: actions/checkout@v2
11+
- name: Use Node.js ${{ matrix.node-version }}
12+
uses: actions/setup-node@v1
13+
with:
14+
node-version: ${{ matrix.node-version }}
15+
- name: Install dependencies
16+
run: yarn install --frozen-lockfile
17+
- name: Lint
18+
run: |
19+
npm run lint:types
20+
npm run lint
21+
- name: Test
22+
run: npm test
23+
env:
24+
CI: true
25+
- name: Build
26+
run: npm run build

‎.npmignore‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎.prettierrc‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎.prettierrc.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
singleQuote: true,
3+
trailingComma: 'all',
4+
};

‎.vscode/settings.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"editor.codeActionsOnSave": {
3+
"source.fixAll.eslint": true
4+
},
5+
"typescript.tsdk": "node_modules/typescript/lib"
6+
}

‎CODE_OF_CONDUCT.md‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
1414
Examples of behavior that contributes to creating a positive environment
1515
include:
1616

17-
* Using welcoming and inclusive language
18-
* Being respectful of differing viewpoints and experiences
19-
* Gracefully accepting constructive criticism
20-
* Focusing on what is best for the community
21-
* Showing empathy towards other community members
17+
- Using welcoming and inclusive language
18+
- Being respectful of differing viewpoints and experiences
19+
- Gracefully accepting constructive criticism
20+
- Focusing on what is best for the community
21+
- Showing empathy towards other community members
2222

2323
Examples of unacceptable behavior by participants include:
2424

25-
* The use of sexualized language or imagery and unwelcome sexual attention or
26-
advances
27-
* Trolling, insulting/derogatory comments, and personal or political attacks
28-
* Public or private harassment
29-
* Publishing others' private information, such as a physical or electronic
30-
address, without explicit permission
31-
* Other conduct which could reasonably be considered inappropriate in a
32-
professional setting
25+
- The use of sexualized language or imagery and unwelcome sexual attention or
26+
advances
27+
- Trolling, insulting/derogatory comments, and personal or political attacks
28+
- Public or private harassment
29+
- Publishing others' private information, such as a physical or electronic
30+
address, without explicit permission
31+
- Other conduct which could reasonably be considered inappropriate in a
32+
professional setting
3333

3434
## Our Responsibilities
3535

‎README.md‎

Lines changed: 87 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
<div align="center"><h1>📣 UPDATE</h1>
2-
3-
This component is now a part of React Hook Form V4, and renamed to <a href="https://react-hook-form.com/api/#ErrorMessage">ErrorMessage</a>.
4-
5-
</div>
6-
71
<div align="center">
82
<p align="center">
93
<a href="https://react-hook-form.com" title="React Hook Form - Simple React forms validation">
@@ -16,45 +10,113 @@ This component is now a part of React Hook Form V4, and renamed to <a href="http
1610

1711
<div align="center">
1812

19-
[![npm downloads](https://img.shields.io/npm/dm/react-hook-form-error.svg?style=flat-square)](https://www.npmjs.com/package/react-hook-form-error)
20-
[![npm](https://img.shields.io/npm/dt/react-hook-form-error.svg?style=flat-square)](https://www.npmjs.com/package/react-hook-form-error)
21-
[![npm](https://badgen.net/bundlephobia/minzip/react-hook-form-error)](https://badgen.net/bundlephobia/minzip/react-hook-form-error)
22-
[![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/bluebill1049/react-hook-form-error)&nbsp;[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/react-hook-form-error)
13+
[![npm downloads](https://img.shields.io/npm/dm/error-message.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/error-message)
14+
[![npm](https://img.shields.io/npm/dt/@hookform/error-message.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/error-message)
15+
[![npm](https://badgen.net/bundlephobia/minzip/@hookform/error-message?style=for-the-badge)](https://bundlephobia.com/result?p=@hookform/error-message)
2316

2417
</div>
2518

19+
## Goal
20+
21+
A simple component to render associated input's error message.
22+
2623
## Install
2724

28-
$ npm install react-hook-form-error
25+
```
26+
$ npm install @hookform/error-message
27+
```
2928

3029
## Quickstart
3130

31+
### Single Error Message
32+
33+
```jsx
34+
import React from 'react';
35+
import { useForm } from 'react-hook-form';
36+
import { ErrorMessage } from 'hookform@error-message';
37+
38+
export default function App() {
39+
const { register, errors, handleSubmit } = useForm();
40+
const onSubmit = (data) => console.log(data);
41+
42+
return (
43+
<form onSubmit={handleSubmit(onSubmit)}>
44+
<input
45+
name="singleErrorInput"
46+
ref={register({ required: 'This is required.' })}
47+
/>
48+
<ErrorMessage errors={errors} name="singleErrorInput" />
49+
50+
<ErrorMessage
51+
errors={errors}
52+
name="singleErrorInput"
53+
render={({ message }) => <p>{message}</p>}
54+
/>
55+
56+
<input name="name" ref={register({ required: true })} />
57+
<ErrorMessage errors={errors} name="name" message="This is required" />
58+
59+
<input type="submit" />
60+
</form>
61+
);
62+
}
63+
```
64+
65+
### Multiple Error Messages
66+
3267
```jsx
3368
import React from 'react';
34-
import useForm from 'react-hook-form';
35-
import { RHFError } from 'react-hook-form-error';
69+
import { useForm } from 'react-hook-form';
70+
import { ErrorMessage } from '@hookform/error-messagee';
3671

37-
function App() {
38-
const { handleSubmit, register, errors } = useForm();
72+
export default function App() {
73+
const { register, errors, handleSubmit } = useForm({
74+
validateCriteriaMode: 'all',
75+
});
76+
const onSubmit = (data) => console.log(data);
3977

4078
return (
41-
<form onSubmit={handleSubmit(data => console.log(data))}>
42-
<input name="test" ref={register} />
43-
<RHFError name="test" errors={errors} />
44-
<button>submit</button>
79+
<form onSubmit={handleSubmit(onSubmit)}>
80+
<input
81+
name="multipleErrorInput"
82+
ref={register({
83+
required: 'This is required.',
84+
pattern: {
85+
value: /d+/,
86+
message: 'This input is number only.',
87+
},
88+
maxLength: {
89+
value: 10,
90+
message: 'This input exceed maxLength.',
91+
},
92+
})}
93+
/>
94+
<ErrorMessage
95+
errors={errors}
96+
name="multipleErrorInput"
97+
render={({ messages }) =>
98+
messages &&
99+
Object.entries(messages).map(([type, message]) => (
100+
<p key={type}>{message}</p>
101+
))
102+
}
103+
/>
104+
105+
<input type="submit" />
45106
</form>
46107
);
47108
}
48109
```
49110

50111
## API
51112

52-
| Prop | Type | Required | Default | Description |
53-
| :--------- | :-------- | :------: | :-----: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- |
54-
| `name` | string | ✓ | | Unique name to register the custom input |
55-
| `errors` | Object | ✓ | | (optional when using <a href="https://react-hook-form.com/api#errors">errors</a>) React Hook Form <a href="https://react-hook-form.com/api#setValue">errors</a> |
56-
| `as` | Component | | | Component reference eg: `<span />` |
57-
| `messages` | Object | | | keys of error type's message |
113+
| Prop | Type | Required | Default | Description |
114+
| :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------: | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
115+
| `name` | string | ✓ | | associated field name. |
116+
| `errors` | object | | | errors object from React Hook Form. It's optional if you are using `FormProvider`. |
117+
| `message` | string \| React.ReactElement | | | inline error message. |
118+
| `as` | string \|<br>React.ReactElement \| <br>React.ComponentType | | | Wrapper component or HTML tag. eg: `as="p"`, `as={<p />}` or `as={CustomComponent}` |
119+
| `render` | (payload: {<br>&nbsp;&nbsp;message: string \| React.ReactElement;<br>&nbsp;&nbsp;messages?: Record<<br>&nbsp;&nbsp;&nbsp;&nbsp;string,<br>&nbsp;&nbsp;&nbsp;&nbsp;(string \| React.ReactElement \| boolean \| undefined)[]<br>&nbsp;&nbsp;>;<br>}) => React.ReactNode | | | This is a [render prop](https://reactjs.org/docs/render-props.html) for rendering error message or messages. <br>Note: you need to set validateCriteriaMode to 'all' for using messages. |
58120

59121
## Backers
60122

0 commit comments

Comments
 (0)