Merge branch 'master' into feat/useWatch-compute

Author: bluebill1049

package.json

@@ -12,11 +12,11 @@
     "clsx": "^1.2.1",
     "contentlayer": "^0.3.4",
     "little-state-machine": "^4.8.1",
-    "next": "15.1.2",
+    "next": "^15.1.2",
     "next-contentlayer": "^0.3.4",
     "next-themes": "^0.2.1",
     "prism-react-renderer": "^2.4.1",
-    "prismjs": "^1.29.0",
+    "prismjs": "^1.30.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-github-btn": "1.4.0",
@@ -46,8 +46,8 @@
     "eslint-plugin-react-hooks": "5.1.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.3.0",
-    "prettier": "^3.4.2",
-    "typescript": "^5.7.3",
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.3",
     "typescript-eslint": "8.18.1"
   },
   "keywords": [

pnpm-lock.yaml

@@ -17,7 +17,9 @@ export default function ApiGallery() {
     )
 
     if (version !== 7) {
-      router.push(`https://legacy.react-hook-form.com/v${version}/api`)
+      router.push(
+        `https://react-hook-form-website-git-leagcy-hook-form.vercel.app/${version}/api`
+      )
     } else {
       router.push(`/v${version}/docs/`)
     }
@@ -160,6 +162,20 @@ export default function ApiGallery() {
               </Link>
             </div>
           </li>
+          <li>
+            <div>
+              <h3>
+                <code>{`</>`}</code>useLens
+              </h3>
+              <p>
+                Type-safe lenses for building reusable and shareable form
+                components with precise focus on form fields.
+              </p>
+              <Link href="/docs/uselens" aria-label="read more about useLens">
+                Read More ▸
+              </Link>
+            </div>
+          </li>
           <li>
             <div>
               <h3>

src/components/ApiGallery.tsx

@@ -34,7 +34,7 @@
 .links > li > a {
   text-decoration: none;
   color: var(--color-text);
-  padding: 10px 12px;
+  padding: 10px 8px;
   min-width: 48px;
   min-height: 48px;
 }

src/components/Footer.module.css

@@ -39,6 +39,16 @@ export default function Footer() {
         <li>
           <Link href="/media">Media</Link>
         </li>
+        <li>
+          <Link href="https://react-hook-form-website-git-leagcy-hook-form.vercel.app/v6/api">
+            V6
+          </Link>
+        </li>
+        <li>
+          <Link href="https://react-hook-form-website-git-leagcy-hook-form.vercel.app/v5/api">
+            V5
+          </Link>
+        </li>
       </ul>
       <p>
         A project by{" "}

src/components/Footer.tsx

@@ -107,6 +107,7 @@ export const apiLinks: Pages = [
       { pathname: "/docs/useform/unregister", name: "unregister" },
       { pathname: "/docs/useform/formstate", name: "formState" },
       { pathname: "/docs/useform/watch", name: "watch" },
+      { pathname: "/docs/useform/subscribe", name: "subscribe" },
       { pathname: "/docs/useform/handlesubmit", name: "handleSubmit" },
       { pathname: "/docs/useform/reset", name: "reset" },
       { pathname: "/docs/useform/resetfield", name: "resetField" },
@@ -159,6 +160,10 @@ export const apiLinks: Pages = [
     pathname: "/docs/usefieldarray",
     name: "useFieldArray",
   },
+  {
+    pathname: "/docs/uselens",
+    name: "useLens",
+  },
   {
     pathname: "/docs/createFormControl",
     name: "createFormControl",

src/components/Menu/MenuLinks.ts

@@ -1,5 +1,4 @@
-export default `import React from "react";
-import { useForm } from "react-hook-form";
+export default `import { useForm } from "react-hook-form";
 
 export default function App() {
   const {

src/components/codeExamples/formState.ts

@@ -1,5 +1,4 @@
-export default `import React from "react";
-import { useForm } from "react-hook-form";
+export default `import { useForm } from "react-hook-form";
 type FormInputs = {
   test: string
 }

src/components/codeExamples/formStateUseEffectTs.ts

@@ -1,5 +1,4 @@
-export default `import React from "react";
-import { useForm, useFieldArray } from "react-hook-form";
+export default `import { useForm, useFieldArray } from "react-hook-form";
 
 function App() {
   const { register, control, handleSubmit, reset, trigger, setError } = useForm({

src/components/codeExamples/useFieldArray.ts

@@ -56,8 +56,9 @@ body {
   -ms-font-feature-settings: "kern", "liga", "clig", "calt";
   -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
   font-feature-settings: "kern", "liga", "clig", "calt";
-  font-family: "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
-    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family:
+    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 0.9rem;