From 0c7c49588be8cf963b89ea55adf799691d21fbab Mon Sep 17 00:00:00 2001
From: Shubh Porwal <83606943+shubh73@users.noreply.github.com>
Date: Wed, 29 May 2024 00:22:34 +0530
Subject: [PATCH] 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
---
examples/with-react-hook-form/README.md | 4 +-
examples/with-react-hook-form/package.json | 10 +-
examples/with-react-hook-form/pages/_app.tsx | 2 +-
.../pages/{_document.js => _document.tsx} | 7 +-
examples/with-react-hook-form/pages/index.tsx | 94 ++++++++-------
.../with-react-hook-form/public/favicon.ico | Bin 0 -> 25931 bytes
.../with-react-hook-form/public/vercel.svg | 4 +
.../with-react-hook-form/styles/global.css | 111 ++++--------------
.../styles/login.module.css | 93 +++++++++++++++
9 files changed, 177 insertions(+), 148 deletions(-)
rename examples/with-react-hook-form/pages/{_document.js => _document.tsx} (56%)
create mode 100755 examples/with-react-hook-form/public/favicon.ico
create mode 100755 examples/with-react-hook-form/public/vercel.svg
create mode 100644 examples/with-react-hook-form/styles/login.module.css
diff --git a/examples/with-react-hook-form/README.md b/examples/with-react-hook-form/README.md
index 9d0bf10307..cff4f0d04b 100644
--- a/examples/with-react-hook-form/README.md
+++ b/examples/with-react-hook-form/README.md
@@ -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
diff --git a/examples/with-react-hook-form/package.json b/examples/with-react-hook-form/package.json
index 6d7ec20928..825dc930d7 100644
--- a/examples/with-react-hook-form/package.json
+++ b/examples/with-react-hook-form/package.json
@@ -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"
}
}
diff --git a/examples/with-react-hook-form/pages/_app.tsx b/examples/with-react-hook-form/pages/_app.tsx
index 00602c593e..c5a0ea0157 100644
--- a/examples/with-react-hook-form/pages/_app.tsx
+++ b/examples/with-react-hook-form/pages/_app.tsx
@@ -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) {
diff --git a/examples/with-react-hook-form/pages/_document.js b/examples/with-react-hook-form/pages/_document.tsx
similarity index 56%
rename from examples/with-react-hook-form/pages/_document.js
rename to examples/with-react-hook-form/pages/_document.tsx
index b1ded75a08..cec067ebbb 100644
--- a/examples/with-react-hook-form/pages/_document.js
+++ b/examples/with-react-hook-form/pages/_document.tsx
@@ -3,12 +3,7 @@ import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
-
-
-
+
diff --git a/examples/with-react-hook-form/pages/index.tsx b/examples/with-react-hook-form/pages/index.tsx
index 50b973099e..8f421e010b 100644
--- a/examples/with-react-hook-form/pages/index.tsx
+++ b/examples/with-react-hook-form/pages/index.tsx
@@ -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();
+export default function Page() {
+ const [user, setUser] = React.useState(null);
const {
register,
- formState: { errors },
handleSubmit,
+ formState: { errors },
} = useForm();
- const onSubmit = handleSubmit(({ username, password, remember }) => {
- // You should handle login logic with username, password and remember form data
+
+ const onSubmit: SubmitHandler = ({
+ username,
+ password,
+ remember,
+ }) => {
setUser({ name: username });
- });
+ };
return (
-
+
+
+
Login
+
+
+
{user ? (
-
Hello, {user.name}!
+
+
Welcome back, {user.name}!
+
) : (
-