react-hook-form example

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

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)).

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

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"
+}

examples/with-react-hook-form/pages/index.js

@@ -0,0 +1,5 @@
+import Login from '../components/Login'
+
+const IndexPage = () => <Login />
+
+export default IndexPage