@hookform/error-message

.eslintignore

@@ -0,0 +1,5 @@
+/node_modules
+/dist
+/esm
+/coverage
+!.*.js

.eslintrc.js

@@ -1,29 +1,28 @@
 module.exports = {
   parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'react-hooks'],
   extends: [
-    'plugin:@typescript-eslint/recommended',
     'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier/@typescript-eslint',
+    'plugin:prettier/recommended',
   ],
+  parser: '@typescript-eslint/parser',
   parserOptions: {
-    ecmaVersion: 2018,
+    ecmaVersion: 2020,
     sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
   },
-  plugins: ['react-hooks'],
   rules: {
-    curly: 'error',
-    '@typescript-eslint/indent': 'off',
-    '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/no-object-literal-type-assertion': 'off',
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'error',
-    '@typescript-eslint/ban-ts-ignore': 'warn',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
   },
   settings: {
     react: {
-      pragma: 'React',
-      version: '16.9',
+      version: 'detect',
     },
   },
 };

.github/workflows/main.yml

@@ -0,0 +1,26 @@
+name: CI
+on: [push]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.x]
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Lint
+        run: |
+          npm run lint:types
+          npm run lint
+      - name: Test
+        run: npm test
+        env:
+          CI: true
+      - name: Build
+        run: npm run build

.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'all',
+};

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

CODE_OF_CONDUCT.md

@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
 
 ## Our Responsibilities
 

README.md

@@ -1,9 +1,3 @@
-<div align="center"><h1>📣 UPDATE</h1>
-
-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>.
-
-</div>
-
 <div align="center">
     <p align="center">
         <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
 
 <div align="center">
 
-[![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)
-[![npm](https://img.shields.io/npm/dt/react-hook-form-error.svg?style=flat-square)](https://www.npmjs.com/package/react-hook-form-error)
-[![npm](https://badgen.net/bundlephobia/minzip/react-hook-form-error)](https://badgen.net/bundlephobia/minzip/react-hook-form-error)
-[![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)
+[![npm downloads](https://img.shields.io/npm/dm/error-message.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/error-message)
+[![npm](https://img.shields.io/npm/dt/@hookform/error-message.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/error-message)
+[![npm](https://badgen.net/bundlephobia/minzip/@hookform/error-message?style=for-the-badge)](https://bundlephobia.com/result?p=@hookform/error-message)
 
 </div>
 
+## Goal
+
+A simple component to render associated input's error message.
+
 ## Install
 
-    $ npm install react-hook-form-error
+```
+$ 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, 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
+
 ```jsx
 import React from 'react';
-import useForm from 'react-hook-form';
-import { RHFError } from 'react-hook-form-error';
+import { useForm } from 'react-hook-form';
+import { ErrorMessage } from '@hookform/error-messagee';
 
-function App() {
-  const { handleSubmit, register, errors } = useForm();
+export default function App() {
+  const { register, errors, handleSubmit } = useForm({
+    validateCriteriaMode: 'all',
+  });
+  const onSubmit = (data) => console.log(data);
 
   return (
-    <form onSubmit={handleSubmit(data => console.log(data))}>
-      <input name="test" ref={register} />
-      <RHFError name="test" errors={errors} />
-      <button>submit</button>
+    <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 | Default | Description                                                                                                                                                     |
-| :--------- | :-------- | :------: | :-----: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`     | string    |    ✓     |         | Unique name to register the custom input                                                                                                                        |
-| `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> |
-| `as`       | Component |          |         | Component reference eg: `<span />`                                                                                                            |
-| `messages` | Object    |          |         | keys of error type's message                                                                                                                                    |
+| Prop      | Type                                                                                                                                                                                                                                                                  | Required | Default | 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 \|<br>React.ReactElement \| <br>React.ComponentType                                                                                                                                                                                                            |          |         | Wrapper component or HTML tag. eg: `as="p"`, `as={<p />}` or `as={CustomComponent}`                                                                                                      |
+| `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. |
 
 ## Backers