From e6b41ffc8fee5dcdb56bd06c8b6e7f404b55ffbc Mon Sep 17 00:00:00 2001
From: Aydin Akan <aydin.kn12@gmail.com>
Date: Sun, 17 Jan 2021 15:22:02 +0300
Subject: [PATCH 1/4] react-hook-form example

---
 examples/with-react-hook-form/.gitignore      | 34 +++++++++++
 examples/with-react-hook-form/README.md       | 23 ++++++++
 .../with-react-hook-form/components/Login.js  | 57 +++++++++++++++++++
 examples/with-react-hook-form/package.json    | 16 ++++++
 examples/with-react-hook-form/pages/index.js  |  5 ++
 5 files changed, 135 insertions(+)
 create mode 100644 examples/with-react-hook-form/.gitignore
 create mode 100644 examples/with-react-hook-form/README.md
 create mode 100644 examples/with-react-hook-form/components/Login.js
 create mode 100644 examples/with-react-hook-form/package.json
 create mode 100644 examples/with-react-hook-form/pages/index.js

diff --git a/examples/with-react-hook-form/.gitignore b/examples/with-react-hook-form/.gitignore
new file mode 100644
index 0000000000000..e3b3fe7726885
--- /dev/null
+++ b/examples/with-react-hook-form/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
\ No newline at end of file
diff --git a/examples/with-react-hook-form/README.md b/examples/with-react-hook-form/README.md
new file mode 100644
index 0000000000000..20ef12175a311
--- /dev/null
+++ b/examples/with-react-hook-form/README.md
@@ -0,0 +1,23 @@
+# with react-hook-form
+
+This example shows how to integrate react-hook-form in Next.js
+
+Form handling doesn't have to be painful. React Hook Form will help you write less code while achieving better performance. For more information, see [react-hook-form](https://react-hook-form.com)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com/now):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-hook-form&project-name=with-react-hook-form&repository-name=with-react-hook-form)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-react-hook-form with-react-hook-form-app
+# or
+yarn create next-app --example with-react-hook-form with-react-hook-form-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-react-hook-form/components/Login.js b/examples/with-react-hook-form/components/Login.js
new file mode 100644
index 0000000000000..976c02c524322
--- /dev/null
+++ b/examples/with-react-hook-form/components/Login.js
@@ -0,0 +1,57 @@
+import { useForm } from 'react-hook-form'
+
+const Login = () => {
+  const { register, errors, handleSubmit } = useForm()
+  const login = handleSubmit(({ username, password, remember }) => {
+    console.log(
+      `username:${username}, password:${password}, remember:${remember}`
+    )
+    // Handle login logic with username, password and remember form data
+  })
+
+  return (
+    <form onSubmit={login}>
+      <div>
+        <input
+          type="text"
+          name="username"
+          placeholder="user name"
+          ref={register({
+            required: { value: true, message: 'User name is required' },
+            minLength: {
+              value: 3,
+              message: 'User name cannot be less than 3 character',
+            },
+          })}
+          className={'form-field' + (errors.username ? ' has-error' : '')}
+        />
+        {errors.username && (
+          <span className="error">{errors.username.message}</span>
+        )}
+      </div>
+      <div>
+        <input
+          type="password"
+          name="password"
+          placeholder="password"
+          ref={register({
+            required: { value: true, message: 'Please enter your password' },
+          })}
+          className={'form-field' + (errors.password ? ' has-error' : '')}
+        />
+        {errors.password && (
+          <span className="error">{errors.password.message}</span>
+        )}
+      </div>
+      <div>
+        <input type="checkbox" name="remember" id="remember" ref={register} />
+        <label htmlFor="remember">Remember me</label>
+      </div>
+      <div>
+        <button type="submit">Login</button>
+      </div>
+    </form>
+  )
+}
+
+export default Login
diff --git a/examples/with-react-hook-form/package.json b/examples/with-react-hook-form/package.json
new file mode 100644
index 0000000000000..edfe76ebcf57f
--- /dev/null
+++ b/examples/with-react-hook-form/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "with-react-hook-form",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-hook-form": "^6.14.1"
+  },
+  "license": "MIT"
+}
diff --git a/examples/with-react-hook-form/pages/index.js b/examples/with-react-hook-form/pages/index.js
new file mode 100644
index 0000000000000..166bcffd8d656
--- /dev/null
+++ b/examples/with-react-hook-form/pages/index.js
@@ -0,0 +1,5 @@
+import Login from '../components/Login'
+
+const IndexPage = () => <Login />
+
+export default IndexPage

From 87d2efc72e44cafe46c714be16a9d66294358a74 Mon Sep 17 00:00:00 2001
From: Aydin Akan <aydin.kn12@gmail.com>
Date: Sat, 23 Jan 2021 00:41:52 +0300
Subject: [PATCH 2/4] console.log removed

---
 examples/with-react-hook-form/components/Login.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/examples/with-react-hook-form/components/Login.js b/examples/with-react-hook-form/components/Login.js
index 976c02c524322..61e92ad24f811 100644
--- a/examples/with-react-hook-form/components/Login.js
+++ b/examples/with-react-hook-form/components/Login.js
@@ -3,9 +3,6 @@ import { useForm } from 'react-hook-form'
 const Login = () => {
   const { register, errors, handleSubmit } = useForm()
   const login = handleSubmit(({ username, password, remember }) => {
-    console.log(
-      `username:${username}, password:${password}, remember:${remember}`
-    )
     // Handle login logic with username, password and remember form data
   })
 

From 002afeaf4fd09f112d8fb8fde0993620813d245e Mon Sep 17 00:00:00 2001
From: Aydin Akan <aydin.kn12@gmail.com>
Date: Wed, 27 Jan 2021 22:16:33 +0300
Subject: [PATCH 3/4] global styles and user interaction

---
 .../with-react-hook-form/components/Login.js  | 54 -----------
 examples/with-react-hook-form/pages/_app.js   |  5 +
 examples/with-react-hook-form/pages/index.js  | 77 ++++++++++++++-
 .../with-react-hook-form/styles/global.css    | 97 +++++++++++++++++++
 4 files changed, 177 insertions(+), 56 deletions(-)
 delete mode 100644 examples/with-react-hook-form/components/Login.js
 create mode 100644 examples/with-react-hook-form/pages/_app.js
 create mode 100644 examples/with-react-hook-form/styles/global.css

diff --git a/examples/with-react-hook-form/components/Login.js b/examples/with-react-hook-form/components/Login.js
deleted file mode 100644
index 61e92ad24f811..0000000000000
--- a/examples/with-react-hook-form/components/Login.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useForm } from 'react-hook-form'
-
-const Login = () => {
-  const { register, errors, handleSubmit } = useForm()
-  const login = handleSubmit(({ username, password, remember }) => {
-    // Handle login logic with username, password and remember form data
-  })
-
-  return (
-    <form onSubmit={login}>
-      <div>
-        <input
-          type="text"
-          name="username"
-          placeholder="user name"
-          ref={register({
-            required: { value: true, message: 'User name is required' },
-            minLength: {
-              value: 3,
-              message: 'User name cannot be less than 3 character',
-            },
-          })}
-          className={'form-field' + (errors.username ? ' has-error' : '')}
-        />
-        {errors.username && (
-          <span className="error">{errors.username.message}</span>
-        )}
-      </div>
-      <div>
-        <input
-          type="password"
-          name="password"
-          placeholder="password"
-          ref={register({
-            required: { value: true, message: 'Please enter your password' },
-          })}
-          className={'form-field' + (errors.password ? ' has-error' : '')}
-        />
-        {errors.password && (
-          <span className="error">{errors.password.message}</span>
-        )}
-      </div>
-      <div>
-        <input type="checkbox" name="remember" id="remember" ref={register} />
-        <label htmlFor="remember">Remember me</label>
-      </div>
-      <div>
-        <button type="submit">Login</button>
-      </div>
-    </form>
-  )
-}
-
-export default Login
diff --git a/examples/with-react-hook-form/pages/_app.js b/examples/with-react-hook-form/pages/_app.js
new file mode 100644
index 0000000000000..0bd950249faeb
--- /dev/null
+++ b/examples/with-react-hook-form/pages/_app.js
@@ -0,0 +1,5 @@
+import '../styles/global.css'
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
diff --git a/examples/with-react-hook-form/pages/index.js b/examples/with-react-hook-form/pages/index.js
index 166bcffd8d656..1a40c73c02d4e 100644
--- a/examples/with-react-hook-form/pages/index.js
+++ b/examples/with-react-hook-form/pages/index.js
@@ -1,5 +1,78 @@
-import Login from '../components/Login'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
 
-const IndexPage = () => <Login />
+const IndexPage = () => {
+  const [user, setUser] = useState()
+  const { register, errors, handleSubmit } = useForm()
+  const login = handleSubmit(({ username, password, remember }) => {
+    // You should handle login logic with username, password and remember form data
+    setUser({ name: username })
+  })
+
+  return (
+    <div className="container">
+      {user ? (
+        <span className="hello-user">Hello, {user.name}!</span>
+      ) : (
+        <form onSubmit={login}>
+          <div className="row">
+            <h3 className="form-header">LOGIN</h3>
+          </div>
+          <div className="row">
+            <input
+              type="text"
+              name="username"
+              placeholder="user name"
+              ref={register({
+                required: { value: true, message: 'User name is required' },
+                minLength: {
+                  value: 3,
+                  message: 'User name cannot be less than 3 character',
+                },
+              })}
+              className={'form-field' + (errors.username ? ' has-error' : '')}
+            />
+            {errors.username && (
+              <span className="error-label">{errors.username.message}</span>
+            )}
+          </div>
+          <div className="row">
+            <input
+              type="password"
+              name="password"
+              placeholder="password"
+              ref={register({
+                required: {
+                  value: true,
+                  message: 'Please enter your password',
+                },
+              })}
+              className={'form-field' + (errors.password ? ' has-error' : '')}
+            />
+            {errors.password && (
+              <span className="error-label">{errors.password.message}</span>
+            )}
+          </div>
+          <div className="row row-remember">
+            <input
+              type="checkbox"
+              name="remember"
+              id="remember"
+              ref={register}
+            />
+            <label htmlFor="remember" className="remember-label">
+              Remember me
+            </label>
+          </div>
+          <div className="row">
+            <button type="submit" className="btn login-btn">
+              Login
+            </button>
+          </div>
+        </form>
+      )}
+    </div>
+  )
+}
 
 export default IndexPage
diff --git a/examples/with-react-hook-form/styles/global.css b/examples/with-react-hook-form/styles/global.css
new file mode 100644
index 0000000000000..9cfcfe629d991
--- /dev/null
+++ b/examples/with-react-hook-form/styles/global.css
@@ -0,0 +1,97 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+
+:root {
+  --white: #fff;
+  --light-border: #ccc;
+  --danger: #ff0000;
+  --primary-color: #a4a4f7;
+  --primary-color-light: #7373f9;
+  --secondary-color: #f0f8ff;
+  --shadow-color: #ddd;
+  font-family: 'Poppins', sans-serif;
+  font-size: 12px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.container {
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+}
+
+.row {
+  margin: 10px 20px;
+}
+
+.row-remember {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--light-border);
+  padding: 0 0 15px 0;
+}
+
+.container form {
+  background-color: var(--secondary-color);
+  padding: 2rem;
+  border-radius: 5px;
+  box-shadow: 12px 12px 10px var(--shadow-color);
+  flex: 1;
+}
+
+@media screen and (min-width: 768px) {
+  .container form {
+    flex: 0.5;
+    max-width: 600px;
+  }
+}
+
+.form-header {
+  text-align: center;
+  font-size: 1.5rem;
+}
+
+.form-field {
+  width: 100%;
+  padding: 10px;
+  outline: none;
+  border: 1px solid var(--light-border);
+  border-radius: 5px;
+}
+
+.form-field.has-error {
+  border: 1px solid var(--danger);
+}
+
+.error-label {
+  color: var(--danger);
+}
+
+.remember-label {
+  margin: 0 10px;
+}
+
+.btn {
+  width: 100%;
+  height: 3rem;
+  border: 1px solid var(--light-border);
+  border-radius: 5px;
+}
+
+.btn:hover {
+  background-color: var(--primary-color-light);
+}
+
+.login-btn {
+  background-color: var(--primary-color);
+  color: var(--white);
+}
+
+.hello-user {
+  font-size: 2rem;
+}

From 0715cdea284008442d5957a762660f0f81b3cf7c Mon Sep 17 00:00:00 2001
From: Tim Neutkens <timneutkens@me.com>
Date: Wed, 5 May 2021 13:43:25 +0200
Subject: [PATCH 4/4] Update example for latest version of react-hook-form

---
 examples/with-react-hook-form/package.json   |  2 +-
 examples/with-react-hook-form/pages/index.js | 25 +++++++++-----------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/examples/with-react-hook-form/package.json b/examples/with-react-hook-form/package.json
index edfe76ebcf57f..60fa4a2191e6d 100644
--- a/examples/with-react-hook-form/package.json
+++ b/examples/with-react-hook-form/package.json
@@ -10,7 +10,7 @@
     "next": "latest",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "react-hook-form": "^6.14.1"
+    "react-hook-form": "7.4.0"
   },
   "license": "MIT"
 }
diff --git a/examples/with-react-hook-form/pages/index.js b/examples/with-react-hook-form/pages/index.js
index 1a40c73c02d4e..b063590ee6044 100644
--- a/examples/with-react-hook-form/pages/index.js
+++ b/examples/with-react-hook-form/pages/index.js
@@ -3,27 +3,30 @@ import { useForm } from 'react-hook-form'
 
 const IndexPage = () => {
   const [user, setUser] = useState()
-  const { register, errors, handleSubmit } = useForm()
-  const login = handleSubmit(({ username, password, remember }) => {
+  const {
+    register,
+    formState: { errors },
+    handleSubmit,
+  } = useForm()
+  const onSubmit = ({ username, password, remember }) => {
     // You should handle login logic with username, password and remember form data
     setUser({ name: username })
-  })
+  }
 
   return (
     <div className="container">
       {user ? (
         <span className="hello-user">Hello, {user.name}!</span>
       ) : (
-        <form onSubmit={login}>
+        <form onSubmit={handleSubmit(onSubmit)}>
           <div className="row">
             <h3 className="form-header">LOGIN</h3>
           </div>
           <div className="row">
             <input
               type="text"
-              name="username"
               placeholder="user name"
-              ref={register({
+              {...register('username', {
                 required: { value: true, message: 'User name is required' },
                 minLength: {
                   value: 3,
@@ -39,9 +42,8 @@ const IndexPage = () => {
           <div className="row">
             <input
               type="password"
-              name="password"
               placeholder="password"
-              ref={register({
+              {...register('password', {
                 required: {
                   value: true,
                   message: 'Please enter your password',
@@ -54,12 +56,7 @@ const IndexPage = () => {
             )}
           </div>
           <div className="row row-remember">
-            <input
-              type="checkbox"
-              name="remember"
-              id="remember"
-              ref={register}
-            />
+            <input type="checkbox" id="remember" {...register('remember')} />
             <label htmlFor="remember" className="remember-label">
               Remember me
             </label>