react-hook-form example (#21245)

Co-authored-by: Tim Neutkens <[email protected]>

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/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": "7.4.0"
+  },
+  "license": "MIT"
+}

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

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

@@ -0,0 +1,75 @@
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+
+const IndexPage = () => {
+  const [user, setUser] = useState()
+  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={handleSubmit(onSubmit)}>
+          <div className="row">
+            <h3 className="form-header">LOGIN</h3>
+          </div>
+          <div className="row">
+            <input
+              type="text"
+              placeholder="user name"
+              {...register('username', {
+                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"
+              placeholder="password"
+              {...register('password', {
+                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" id="remember" {...register('remember')} />
+            <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

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