Update with-react-hook-form example (#66253)
Updates `with-react-hook-form` example by bumping react-hook-form and other dependencies to their latest versions, along with a minor cleanup of the UI. --------- Co-authored-by: Sam Ko <sam@vercel.com>
This commit is contained in:
Shubh Porwal
GitHub
parent
7dfb652ef1
commit
0c7c49588b
9 changed files with 177 additions and 148 deletions
|
|
@ -1,8 +1,6 @@
|
|||
# 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)
|
||||
This example demonstrates how to integrate [React Hook Form](https://react-hook-form.com/) with Next.js, helping you write less code and avoid unnecessary re-renders for improved performance.
|
||||
|
||||
## Deploy your own
|
||||
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@
|
|||
"next": "latest",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.33.1"
|
||||
"react-hook-form": "^7.51.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^18.0.6",
|
||||
"@types/react": "^18.0.15",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"typescript": "^4.7.4"
|
||||
"@types/node": "^20.12.12",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"typescript": "^5.4.5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { AppProps } from "next/app";
|
||||
import type { AppProps } from "next/app";
|
||||
import "../styles/global.css";
|
||||
|
||||
export default function MyApp({ Component, pageProps }: AppProps) {
|
||||
|
|
|
|||
|
|
@ -3,12 +3,7 @@ import { Html, Head, Main, NextScript } from "next/document";
|
|||
export default function Document() {
|
||||
return (
|
||||
<Html>
|
||||
<Head>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</Head>
|
||||
<Head />
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import * as React from "react";
|
||||
import Head from "next/head";
|
||||
import { useForm, SubmitHandler } from "react-hook-form";
|
||||
import styles from "../styles/login.module.css";
|
||||
|
||||
interface User {
|
||||
name: string;
|
||||
|
|
@ -11,75 +13,81 @@ interface LoginFormValues {
|
|||
remember: boolean;
|
||||
}
|
||||
|
||||
const IndexPage = () => {
|
||||
const [user, setUser] = useState<User>();
|
||||
export default function Page() {
|
||||
const [user, setUser] = React.useState<User | null>(null);
|
||||
const {
|
||||
register,
|
||||
formState: { errors },
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<LoginFormValues>();
|
||||
const onSubmit = handleSubmit(({ username, password, remember }) => {
|
||||
// You should handle login logic with username, password and remember form data
|
||||
|
||||
const onSubmit: SubmitHandler<LoginFormValues> = ({
|
||||
username,
|
||||
password,
|
||||
remember,
|
||||
}) => {
|
||||
setUser({ name: username });
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className={styles.container}>
|
||||
<Head>
|
||||
<title>Login</title>
|
||||
<meta name="description" content="Login to your account" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
{user ? (
|
||||
<span className="hello-user">Hello, {user.name}!</span>
|
||||
<div className={styles.greeting}>
|
||||
<h2>Welcome back, {user.name}!</h2>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={onSubmit}>
|
||||
<div className="row">
|
||||
<h3 className="form-header">LOGIN</h3>
|
||||
</div>
|
||||
<div className="row">
|
||||
<form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
|
||||
<h2 className={styles.header}>Login</h2>
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="username">Username</label>
|
||||
<input
|
||||
id="username"
|
||||
type="text"
|
||||
placeholder="user name"
|
||||
{...register("username", {
|
||||
required: { value: true, message: "User name is required" },
|
||||
required: "Username is required",
|
||||
minLength: {
|
||||
value: 3,
|
||||
message: "User name cannot be less than 3 character",
|
||||
message: "Username must be at least 3 characters",
|
||||
},
|
||||
})}
|
||||
className={"form-field" + (errors.username ? " has-error" : "")}
|
||||
className={`${styles.input} ${errors.username ? styles.errorInput : ""}`}
|
||||
placeholder="Enter your username"
|
||||
/>
|
||||
{errors.username && (
|
||||
<span className="error-label">{errors.username.message}</span>
|
||||
<span className={styles.errorMessage}>
|
||||
{errors.username.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="password">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="password"
|
||||
{...register("password", {
|
||||
required: {
|
||||
value: true,
|
||||
message: "Please enter your password",
|
||||
},
|
||||
})}
|
||||
className={"form-field" + (errors.password ? " has-error" : "")}
|
||||
{...register("password", { required: "Password is required" })}
|
||||
className={`${styles.input} ${errors.password ? styles.errorInput : ""}`}
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
{errors.password && (
|
||||
<span className="error-label">{errors.password.message}</span>
|
||||
<span className={styles.errorMessage}>
|
||||
{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 className={styles.rememberMe}>
|
||||
<input id="remember" type="checkbox" {...register("remember")} />
|
||||
<label htmlFor="remember">Remember me</label>
|
||||
</div>
|
||||
<button type="submit" className={styles.submitButton}>
|
||||
Login
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default IndexPage;
|
||||
}
|
||||
|
|
|
|||
BIN
examples/with-react-hook-form/public/favicon.ico
Executable file
BIN
examples/with-react-hook-form/public/favicon.ico
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
4
examples/with-react-hook-form/public/vercel.svg
Executable file
4
examples/with-react-hook-form/public/vercel.svg
Executable file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,95 +1,26 @@
|
|||
: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;
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family:
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
Segoe UI,
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
Fira Sans,
|
||||
Droid Sans,
|
||||
Helvetica Neue,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
93
examples/with-react-hook-form/styles/login.module.css
Normal file
93
examples/with-react-hook-form/styles/login.module.css
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
.greeting {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.form {
|
||||
background-color: #fff;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.field label {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: 0.8rem;
|
||||
font-size: 1rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.errorInput {
|
||||
border-color: #e53e3e;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
color: #e53e3e;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.rememberMe {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.rememberMe label {
|
||||
font-size: 0.9rem;
|
||||
color: #333;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
width: 100%;
|
||||
padding: 0.8rem;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background-color: #007bff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.submitButton:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
Loading…
Reference in a new issue