From 13993dc042d66c6aa04e3e94fd6a538c5658bdfa Mon Sep 17 00:00:00 2001
From: Lucas <aranlucas@gmail.com>
Date: Mon, 5 Jun 2023 10:44:52 -0700
Subject: [PATCH 1/5] feat: cleaning up + adding new mdx pages

---
 .browserslistrc                               |   3 -
 .lighthouserc.js                              |  15 -
 package.json                                  |   3 +-
 src/components/Admonition.module.css          |  58 ++
 src/components/Admonition.tsx                 | 113 +++
 src/components/ApiErrors.tsx                  | 113 ---
 src/components/ApiWatch.tsx                   | 212 -----
 src/components/Bday.tsx                       | 154 ----
 src/components/CodeArea.tsx                   |  43 +-
 src/components/CodeSandbox.tsx                |  40 +
 src/components/ControllerContent.tsx          |  84 --
 src/components/FormContext.tsx                |  54 --
 src/components/SideMenu.tsx                   | 204 -----
 src/components/TabGroup.tsx                   |   2 +-
 src/components/UseForm.tsx                    |  18 +-
 src/components/UseFormContext.tsx             |  32 -
 src/components/ValidationResolver.tsx         | 221 -----
 src/components/VideoList.module.css           |  23 -
 src/components/VideoList.tsx                  |  50 --
 src/components/codeExamples/ErrorCodeTypes.ts |  83 --
 src/components/codeExamples/accessibleCode.ts |  25 -
 .../codeExamples/accessibleCodeBase.ts        |  18 -
 .../codeExamples/accessibleCodeFinal.ts       |  31 -
 src/components/codeExamples/ajvResolver.tsx   |  42 -
 .../codeExamples/asyncDefaultValue.ts         |   8 -
 src/components/codeExamples/asyncValues.ts    |   9 -
 src/components/codeExamples/clearError.ts     |  29 -
 src/components/codeExamples/clearErrorTs.ts   |  38 -
 .../codeExamples/conditionalComponent.tsx     |  55 --
 src/components/codeExamples/connectForm.ts    |  26 -
 src/components/codeExamples/control.ts        |  15 -
 src/components/codeExamples/controlTs.ts      |  26 -
 src/components/codeExamples/controlled.ts     |  36 -
 .../controlledMixedUncontrolled.ts            |  35 -
 .../controlledMixedUncontrolledInput.ts       |  36 -
 src/components/codeExamples/controller.ts     |  27 -
 src/components/codeExamples/controllerTs.ts   |  30 -
 .../customHookWithValidationResolver.tsx      |  54 --
 src/components/codeExamples/defaultExample.ts |  23 -
 .../codeExamples/defaultExampleTs.tsx         |  28 -
 src/components/codeExamples/defaultValues.ts  |  10 -
 .../codeExamples/defaultValuesTs.ts           |  18 -
 src/components/codeExamples/enzymeInput.tsx   |   3 -
 src/components/codeExamples/errorCode.ts      |  30 -
 src/components/codeExamples/errorCodeTs.tsx   |  38 -
 .../codeExamples/errorMessageAdvance.ts       |  28 -
 src/components/codeExamples/fieldArray.tsx    |  43 -
 .../codeExamples/fieldArrayReset.ts           |  54 --
 .../codeExamples/focusController.tsx          |  20 -
 src/components/codeExamples/form.ts           |  24 -
 .../codeExamples/formContextPerformance.ts    |  36 -
 src/components/codeExamples/formWizard.ts     |  59 --
 src/components/codeExamples/getStarted.ts     | 396 ---------
 .../codeExamples/handleSubmitAsyncCode.ts     |  26 -
 .../codeExamples/handleSubmitCode.ts          |  15 -
 .../codeExamples/handleSubmitCodeTs.ts        |  24 -
 .../codeExamples/importKeystroke.ts           |   4 -
 src/components/codeExamples/initialValue.ts   |  16 -
 src/components/codeExamples/input.ts          |  18 -
 src/components/codeExamples/joiResolver.tsx   |  24 -
 src/components/codeExamples/joiResolverTs.ts  |  32 -
 .../codeExamples/manualValidation.ts          |  34 -
 .../codeExamples/multipleErrorCode.ts         |  27 -
 .../codeExamples/multipleErrorCodeTs.ts       |  35 -
 .../codeExamples/nativeValidation.ts          |  18 -
 src/components/codeExamples/reactNative.ts    |  31 -
 .../codeExamples/reactNativeController.ts     |  52 --
 src/components/codeExamples/resetCode.ts      |  42 -
 .../codeExamples/resetCodeControlled.ts       |  45 -
 src/components/codeExamples/resetCodeTs.ts    |  35 -
 .../codeExamples/resetController.ts           |  38 -
 .../codeExamples/resetControllerTs.ts         |  44 -
 src/components/codeExamples/resetFieldCode.ts |  30 -
 .../codeExamples/resetFieldOptionCode.ts      |  55 --
 .../codeExamples/schemaValidation.ts          |  28 -
 .../codeExamples/schemaValidationTs.ts        |  29 -
 src/components/codeExamples/setFocus.ts       |  20 -
 src/components/codeExamples/setFocusTs.ts     |  24 -
 .../codeExamples/setValueUseFieldArray.ts     |  58 --
 src/components/codeExamples/setup.native.ts   |   2 -
 src/components/codeExamples/shareRef.ts       |  20 -
 src/components/codeExamples/shareRefTs.ts     |  25 -
 .../codeExamples/shouldUseNativeValidation.ts |  16 -
 src/components/codeExamples/smartForm.ts      |  16 -
 src/components/codeExamples/strictlyTyped.ts  |  62 --
 src/components/codeExamples/submitReset.ts    |  30 -
 src/components/codeExamples/testingForm.ts    | 190 -----
 src/components/codeExamples/toggleFields.tsx  |  17 -
 src/components/codeExamples/typeScript.ts     |  33 -
 src/components/codeExamples/unregisterCode.ts |  17 -
 .../codeExamples/unregisterCodeTs.ts          |  25 -
 .../unregisterControlledComponent.tsx         |  34 -
 .../unregisterWrapControlledComponent.tsx     |  30 -
 src/components/codeExamples/useWatchTypes.ts  | 201 -----
 .../codeExamples/validationResolver.ts        |  57 --
 .../codeExamples/validationResolverTs.tsx     |  53 --
 .../codeExamples/validationSchema.ts          |  23 -
 .../codeExamples/validationSchemaNative.ts    |  34 -
 .../codeExamples/validationSchemaTs.ts        |  28 -
 src/components/codeExamples/vestResolver.tsx  |  45 -
 .../codeExamples/virtualizedList.ts           |  43 -
 .../codeExamples/virtualizedListFieldArray.ts |  44 -
 src/components/codeExamples/watchCode.ts      |  31 -
 src/components/codeExamples/watchCodeTs.ts    |  38 -
 src/components/codeExamples/watchCodeTypes.ts |  50 --
 .../codeExamples/watchFieldArrayCode.ts       |  38 -
 src/components/codeExamples/zodResolver.ts    |  24 -
 src/components/codeExamples/zodResolverTs.ts  |  29 -
 src/components/layout.css                     |  65 +-
 src/components/mdx/mdx.tsx                    |   4 +-
 src/components/mdx/pre.tsx                    |   2 +-
 src/components/react-app-env.d.ts             |   4 -
 src/components/useController/Controller.tsx   |  36 -
 src/components/useForm/ClearErrors.tsx        |  55 --
 src/components/useForm/Control.tsx            |  53 --
 src/components/useForm/HandleSubmit.tsx       |  81 --
 src/components/useForm/Reset.tsx              | 101 ---
 src/components/useForm/SetFocus.tsx           |  56 --
 src/components/useForm/UnRegister.tsx         | 268 ------
 src/components/useForm/Watch.tsx              |  29 -
 src/components/useForm/resetField.tsx         | 219 -----
 src/components/utils/useWindowSize.ts         |   2 -
 src/content/clear-errors.mdx                  | 121 +++
 src/content/control.mdx                       |  62 ++
 src/content/controller.mdx                    | 228 ++++++
 src/content/handle-submit.mdx                 | 133 +++
 src/content/reset-field.mdx                   | 139 ++++
 src/content/reset.mdx                         | 330 ++++++++
 src/content/set-focus.mdx                     |  75 ++
 src/content/unregister.mdx                    | 128 +++
 src/content/use-form-context.mdx              |  49 ++
 src/content/{docs => }/use-form.mdx           |  70 +-
 src/content/watch.mdx                         | 178 ++++
 src/data/advanced.tsx                         | 628 --------------
 src/data/faq.tsx                              | 768 ------------------
 src/data/languages.js                         |   4 -
 src/data/ts.tsx                               | 568 -------------
 src/pages/_app.tsx                            |  19 +-
 src/pages/advanced-usage.tsx                  |   9 +-
 src/pages/docs/usecontroller/controller.tsx   |  27 +-
 src/pages/docs/useform.tsx                    |   8 +-
 src/pages/docs/useform/clearerrors.tsx        |  25 +-
 src/pages/docs/useform/control.tsx            |  25 +-
 src/pages/docs/useform/handlesubmit.tsx       |  28 +-
 src/pages/docs/useform/reset.tsx              |  27 +-
 src/pages/docs/useform/resetfield.tsx         |  28 +-
 src/pages/docs/useform/setfocus.tsx           |  28 +-
 src/pages/docs/useform/unregister.tsx         |  27 +-
 src/pages/docs/useform/watch.tsx              |  25 +-
 src/pages/docs/useformcontext.tsx             |  27 +-
 src/pages/faqs.tsx                            |   9 +-
 src/pages/get-started.tsx                     |   8 +-
 src/pages/ts.tsx                              |   8 +-
 src/state/setting.ts                          |   4 -
 tsconfig.json                                 |   2 +-
 yarn.lock                                     | 173 +---
 156 files changed, 2006 insertions(+), 7891 deletions(-)
 delete mode 100644 .browserslistrc
 delete mode 100644 .lighthouserc.js
 create mode 100644 src/components/Admonition.module.css
 create mode 100644 src/components/Admonition.tsx
 delete mode 100644 src/components/ApiErrors.tsx
 delete mode 100644 src/components/ApiWatch.tsx
 delete mode 100644 src/components/Bday.tsx
 create mode 100644 src/components/CodeSandbox.tsx
 delete mode 100644 src/components/ControllerContent.tsx
 delete mode 100644 src/components/FormContext.tsx
 delete mode 100644 src/components/SideMenu.tsx
 delete mode 100644 src/components/UseFormContext.tsx
 delete mode 100644 src/components/ValidationResolver.tsx
 delete mode 100644 src/components/VideoList.module.css
 delete mode 100644 src/components/VideoList.tsx
 delete mode 100644 src/components/codeExamples/ErrorCodeTypes.ts
 delete mode 100644 src/components/codeExamples/accessibleCode.ts
 delete mode 100644 src/components/codeExamples/accessibleCodeBase.ts
 delete mode 100644 src/components/codeExamples/accessibleCodeFinal.ts
 delete mode 100644 src/components/codeExamples/ajvResolver.tsx
 delete mode 100644 src/components/codeExamples/asyncDefaultValue.ts
 delete mode 100644 src/components/codeExamples/asyncValues.ts
 delete mode 100644 src/components/codeExamples/clearError.ts
 delete mode 100644 src/components/codeExamples/clearErrorTs.ts
 delete mode 100644 src/components/codeExamples/conditionalComponent.tsx
 delete mode 100644 src/components/codeExamples/connectForm.ts
 delete mode 100644 src/components/codeExamples/control.ts
 delete mode 100644 src/components/codeExamples/controlTs.ts
 delete mode 100644 src/components/codeExamples/controlled.ts
 delete mode 100644 src/components/codeExamples/controlledMixedUncontrolled.ts
 delete mode 100644 src/components/codeExamples/controlledMixedUncontrolledInput.ts
 delete mode 100644 src/components/codeExamples/controller.ts
 delete mode 100644 src/components/codeExamples/controllerTs.ts
 delete mode 100644 src/components/codeExamples/customHookWithValidationResolver.tsx
 delete mode 100644 src/components/codeExamples/defaultExample.ts
 delete mode 100644 src/components/codeExamples/defaultExampleTs.tsx
 delete mode 100644 src/components/codeExamples/defaultValues.ts
 delete mode 100644 src/components/codeExamples/defaultValuesTs.ts
 delete mode 100644 src/components/codeExamples/enzymeInput.tsx
 delete mode 100644 src/components/codeExamples/errorCode.ts
 delete mode 100644 src/components/codeExamples/errorCodeTs.tsx
 delete mode 100644 src/components/codeExamples/errorMessageAdvance.ts
 delete mode 100644 src/components/codeExamples/fieldArray.tsx
 delete mode 100644 src/components/codeExamples/fieldArrayReset.ts
 delete mode 100644 src/components/codeExamples/focusController.tsx
 delete mode 100644 src/components/codeExamples/form.ts
 delete mode 100644 src/components/codeExamples/formContextPerformance.ts
 delete mode 100644 src/components/codeExamples/formWizard.ts
 delete mode 100644 src/components/codeExamples/getStarted.ts
 delete mode 100644 src/components/codeExamples/handleSubmitAsyncCode.ts
 delete mode 100644 src/components/codeExamples/handleSubmitCode.ts
 delete mode 100644 src/components/codeExamples/handleSubmitCodeTs.ts
 delete mode 100644 src/components/codeExamples/importKeystroke.ts
 delete mode 100644 src/components/codeExamples/initialValue.ts
 delete mode 100644 src/components/codeExamples/input.ts
 delete mode 100644 src/components/codeExamples/joiResolver.tsx
 delete mode 100644 src/components/codeExamples/joiResolverTs.ts
 delete mode 100644 src/components/codeExamples/manualValidation.ts
 delete mode 100644 src/components/codeExamples/multipleErrorCode.ts
 delete mode 100644 src/components/codeExamples/multipleErrorCodeTs.ts
 delete mode 100644 src/components/codeExamples/nativeValidation.ts
 delete mode 100644 src/components/codeExamples/reactNative.ts
 delete mode 100644 src/components/codeExamples/reactNativeController.ts
 delete mode 100644 src/components/codeExamples/resetCode.ts
 delete mode 100644 src/components/codeExamples/resetCodeControlled.ts
 delete mode 100644 src/components/codeExamples/resetCodeTs.ts
 delete mode 100644 src/components/codeExamples/resetController.ts
 delete mode 100644 src/components/codeExamples/resetControllerTs.ts
 delete mode 100644 src/components/codeExamples/resetFieldCode.ts
 delete mode 100644 src/components/codeExamples/resetFieldOptionCode.ts
 delete mode 100644 src/components/codeExamples/schemaValidation.ts
 delete mode 100644 src/components/codeExamples/schemaValidationTs.ts
 delete mode 100644 src/components/codeExamples/setFocus.ts
 delete mode 100644 src/components/codeExamples/setFocusTs.ts
 delete mode 100644 src/components/codeExamples/setValueUseFieldArray.ts
 delete mode 100644 src/components/codeExamples/setup.native.ts
 delete mode 100644 src/components/codeExamples/shareRef.ts
 delete mode 100644 src/components/codeExamples/shareRefTs.ts
 delete mode 100644 src/components/codeExamples/shouldUseNativeValidation.ts
 delete mode 100644 src/components/codeExamples/smartForm.ts
 delete mode 100644 src/components/codeExamples/strictlyTyped.ts
 delete mode 100644 src/components/codeExamples/submitReset.ts
 delete mode 100644 src/components/codeExamples/testingForm.ts
 delete mode 100644 src/components/codeExamples/toggleFields.tsx
 delete mode 100644 src/components/codeExamples/typeScript.ts
 delete mode 100644 src/components/codeExamples/unregisterCode.ts
 delete mode 100644 src/components/codeExamples/unregisterCodeTs.ts
 delete mode 100644 src/components/codeExamples/unregisterControlledComponent.tsx
 delete mode 100644 src/components/codeExamples/unregisterWrapControlledComponent.tsx
 delete mode 100644 src/components/codeExamples/useWatchTypes.ts
 delete mode 100644 src/components/codeExamples/validationResolver.ts
 delete mode 100644 src/components/codeExamples/validationResolverTs.tsx
 delete mode 100644 src/components/codeExamples/validationSchema.ts
 delete mode 100644 src/components/codeExamples/validationSchemaNative.ts
 delete mode 100644 src/components/codeExamples/validationSchemaTs.ts
 delete mode 100644 src/components/codeExamples/vestResolver.tsx
 delete mode 100644 src/components/codeExamples/virtualizedList.ts
 delete mode 100644 src/components/codeExamples/virtualizedListFieldArray.ts
 delete mode 100644 src/components/codeExamples/watchCode.ts
 delete mode 100644 src/components/codeExamples/watchCodeTs.ts
 delete mode 100644 src/components/codeExamples/watchCodeTypes.ts
 delete mode 100644 src/components/codeExamples/watchFieldArrayCode.ts
 delete mode 100644 src/components/codeExamples/zodResolver.ts
 delete mode 100644 src/components/codeExamples/zodResolverTs.ts
 delete mode 100644 src/components/react-app-env.d.ts
 delete mode 100644 src/components/useController/Controller.tsx
 delete mode 100644 src/components/useForm/ClearErrors.tsx
 delete mode 100644 src/components/useForm/Control.tsx
 delete mode 100644 src/components/useForm/HandleSubmit.tsx
 delete mode 100644 src/components/useForm/Reset.tsx
 delete mode 100644 src/components/useForm/SetFocus.tsx
 delete mode 100644 src/components/useForm/UnRegister.tsx
 delete mode 100644 src/components/useForm/Watch.tsx
 delete mode 100644 src/components/useForm/resetField.tsx
 create mode 100644 src/content/clear-errors.mdx
 create mode 100644 src/content/control.mdx
 create mode 100644 src/content/controller.mdx
 create mode 100644 src/content/handle-submit.mdx
 create mode 100644 src/content/reset-field.mdx
 create mode 100644 src/content/reset.mdx
 create mode 100644 src/content/set-focus.mdx
 create mode 100644 src/content/unregister.mdx
 create mode 100644 src/content/use-form-context.mdx
 rename src/content/{docs => }/use-form.mdx (96%)
 create mode 100644 src/content/watch.mdx
 delete mode 100644 src/data/advanced.tsx
 delete mode 100644 src/data/faq.tsx
 delete mode 100644 src/data/languages.js
 delete mode 100644 src/data/ts.tsx
 delete mode 100644 src/state/setting.ts

diff --git a/.browserslistrc b/.browserslistrc
deleted file mode 100644
index 93cda006d..000000000
--- a/.browserslistrc
+++ /dev/null
@@ -1,3 +0,0 @@
-> 0.25%
-ie 11
-not op_mini all
diff --git a/.lighthouserc.js b/.lighthouserc.js
deleted file mode 100644
index 66dbfb720..000000000
--- a/.lighthouserc.js
+++ /dev/null
@@ -1,15 +0,0 @@
-module.exports = {
-  collect: {
-    autodiscoverUrlBlocklist: ["_gatsby/slices/_gatsby-scripts-1.html"],
-  },
-  ci: {
-    upload: {
-      target: "temporary-public-storage",
-    },
-    assert: {
-      assertions: {
-        "first-contentful-paint": ["error", { maxNumericValue: 3000 }],
-      },
-    },
-  },
-}
diff --git a/package.json b/package.json
index 2e64791dd..7e1a2d310 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^13.4.4",
     "@types/node": "^20.2.5",
+    "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
     "little-state-machine": "^4.8.0",
     "next": "^13.4.4",
@@ -18,12 +19,10 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-github-btn": "1.4.0",
-    "react-helmet": "6.1.0",
     "react-hook-form": "6.0.0",
     "react-simple-animate": "^3.5.2",
     "react-simple-img": "3.0.0",
     "react-sortablejs": "1.5.1",
-    "react-syntax-highlighter": "^15.5.0",
     "rehype-mdx-code-props": "^1.0.0",
     "remark-custom-heading-id": "^1.0.1",
     "remark-emoji": "^3.1.1",
diff --git a/src/components/Admonition.module.css b/src/components/Admonition.module.css
new file mode 100644
index 000000000..023ca9909
--- /dev/null
+++ b/src/components/Admonition.module.css
@@ -0,0 +1,58 @@
+.admonition {
+  margin-bottom: 1em;
+  padding: 15px 30px 15px 15px;
+  border-radius: 0.4rem;
+}
+
+.admonitionIcon {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 0.2em;
+}
+
+.admonitionIcon svg {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  stroke-width: 0;
+}
+
+.admonitionIcon svg {
+  stroke: rgb(253, 253, 254);
+  fill: rgb(253, 253, 254);
+}
+
+.admonitionContent > :last-child {
+  margin-bottom: 0;
+}
+
+/** Customization */
+.admonitionWarning {
+  background-color: rgba(230, 126, 34, 0.1);
+  border-left: 8px solid #e67e22;
+}
+
+.admonitionTip {
+  background-color: rgba(46, 204, 113, 0.1);
+  border-left: 8px solid #2ecc71;
+}
+
+.admonitionCaution {
+  background-color: rgba(231, 76, 60, 0.1);
+  border-left: 8px solid #e74c3c;
+}
+
+.admonitionImportant {
+  background-color: rgb(25, 60, 71, 0.1);
+  border-left: 8px solid rgb(76, 179, 212, 0.1);
+}
+
+.admonitionNote {
+  background-color: rgb(71, 71, 72, 0.1);
+  border-left: 8px solid rgb(212, 213, 216);
+}
+
+.admonitionQuestion {
+  background-color: rgba(8, 61, 119, 0.1);
+  border-left: 8px solid #083d77;
+}
diff --git a/src/components/Admonition.tsx b/src/components/Admonition.tsx
new file mode 100644
index 000000000..edb3fd063
--- /dev/null
+++ b/src/components/Admonition.tsx
@@ -0,0 +1,113 @@
+import styles from "./Admonition.module.css"
+import { cva } from "class-variance-authority"
+
+/**
+ * Octicons Icons by GitHub released under MIT License
+ * https://github.com/primer/octicons/
+ */
+
+const svgMap = {
+  warning: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fillRule="evenodd"
+        d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"
+      />
+    </svg>
+  ),
+  important: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="16"
+      viewBox="0 0 14 16"
+    >
+      <path
+        fillRule="evenodd"
+        d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+      />
+    </svg>
+  ),
+  caution: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="16"
+      viewBox="0 0 12 16"
+    >
+      <path
+        fillRule="evenodd"
+        d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"
+      />
+    </svg>
+  ),
+  tip: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="16"
+      viewBox="0 0 12 16"
+    >
+      <path
+        fillRule="evenodd"
+        d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"
+      />
+    </svg>
+  ),
+  note: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="16"
+      viewBox="0 0 14 16"
+    >
+      <path
+        fillRule="evenodd"
+        d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
+      />
+    </svg>
+  ),
+  question: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="16"
+      viewBox="0 0 14 16"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M6 10h2v2H6v-2zm4-3.5C10 8.64 8 9 8 9H6c0-.55.45-1 1-1h.5c.28 0 .5-.22.5-.5v-1c0-.28-.22-.5-.5-.5h-1c-.28 0-.5.22-.5.5V7H4c0-1.5 1.5-3 3-3s3 1 3 2.5zM7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7s7-3.14 7-7s-3.14-7-7-7z"
+      />
+    </svg>
+  ),
+}
+
+const admonition = cva(styles.admonition, {
+  variants: {
+    type: {
+      warning: styles.admonitionWarning,
+      important: styles.admonitionImportant,
+      caution: styles.admonitionCaution,
+      tip: styles.admonitionTip,
+      note: styles.admonitionNote,
+      question: styles.admonitionQuestion,
+    },
+  },
+})
+
+export const Admonition = ({ type, title, children }) => {
+  return (
+    <div className={admonition({ type })}>
+      <div className={styles.admonitionHeading}>
+        <span className={styles.admonitionIcon}>{svgMap[type]}</span>{" "}
+        <b>{title?.toUpperCase() || type.toUpperCase()}</b>
+      </div>
+      <div className={styles.admonitionContent}>{children}</div>
+    </div>
+  )
+}
diff --git a/src/components/ApiErrors.tsx b/src/components/ApiErrors.tsx
deleted file mode 100644
index 4f45159a2..000000000
--- a/src/components/ApiErrors.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { memo } from "react"
-import CodeArea from "./CodeArea"
-import errorCode from "./codeExamples/errorCode"
-import errorCodeTs from "./codeExamples/errorCodeTs"
-import errorCodeTypes from "./codeExamples/ErrorCodeTypes"
-import generic from "../data/generic"
-import multipleErrorCode from "./codeExamples/multipleErrorCode"
-import multipleErrorCodeTs from "./codeExamples/multipleErrorCodeTs"
-import TabGroup from "./TabGroup"
-import typographyStyles from "../styles/typography.module.css"
-import tableStyles from "../styles/table.module.css"
-
-function ApiErrors({
-  api,
-  goToSection,
-}: {
-  api: any
-  goToSection: (name: string, animate?: boolean) => void
-}) {
-  return (
-    <>
-      <code className={typographyStyles.codeHeading}>
-        <h2>
-          errors:{" "}
-          <span
-            className={typographyStyles.typeText}
-          >{`Record<string, Object>`}</span>
-        </h2>
-      </code>
-
-      {api.errors.description}
-
-      <div className={tableStyles.tableWrapper}>
-        <table className={tableStyles.table}>
-          <tbody>
-            <tr>
-              <th>{generic.name}</th>
-              <th
-                style={{
-                  minWidth: 250,
-                }}
-              >
-                {generic.type}
-              </th>
-              <th>{generic.description}</th>
-            </tr>
-            <tr>
-              <td>
-                <code>type</code>
-              </td>
-              <td>
-                <span className={typographyStyles.typeText}>string</span>
-              </td>
-              <td>Error {generic.type}. eg: required, min, max, minLength</td>
-            </tr>
-            <tr>
-              <td>
-                <code>types</code>
-              </td>
-              <td>
-                <span
-                  className={typographyStyles.typeText}
-                >{`Record<{ string, string | boolean }>`}</span>
-              </td>
-              <td>{api.errors.types}</td>
-            </tr>
-            <tr>
-              <td>
-                <code>message</code>
-              </td>
-              <td>
-                <span className={typographyStyles.typeText}>
-                  string | React.ReactElement
-                </span>
-              </td>
-              <td>{api.errors.message}</td>
-            </tr>
-            <tr>
-              <td>
-                <code>ref</code>
-              </td>
-              <td>
-                <span className={typographyStyles.typeText}>React.Ref</span>
-              </td>
-              <td>{api.errors.ref}</td>
-            </tr>
-          </tbody>
-        </table>
-        {api.errors.note(goToSection)}
-      </div>
-
-      <TabGroup buttonLabels={["First error detected", "Display all errors"]}>
-        <CodeArea
-          rawData={errorCode}
-          tsRawData={errorCodeTs}
-          rawTypes={errorCodeTypes}
-          url="https://codesandbox.io/s/react-hook-form-error-v6-rcpm8"
-          tsUrl="https://codesandbox.io/s/react-hook-form-error-ts-v6-500eo"
-        />
-        <CodeArea
-          rawData={multipleErrorCode}
-          tsRawData={multipleErrorCodeTs}
-          url="https://codesandbox.io/s/react-hook-form-validatecriteriamode-v6-tixtl"
-          tsUrl="https://codesandbox.io/s/react-hook-form-validatecriteriamode-v6-ts-r51li"
-        />
-      </TabGroup>
-
-      <hr />
-    </>
-  )
-}
-
-export default memo(ApiErrors)
diff --git a/src/components/ApiWatch.tsx b/src/components/ApiWatch.tsx
deleted file mode 100644
index fde39656d..000000000
--- a/src/components/ApiWatch.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import CodeArea from "./CodeArea"
-import watchCode from "./codeExamples/watchCode"
-import watchCodeTs from "./codeExamples/watchCodeTs"
-import generic from "../data/generic"
-import typographyStyles from "../styles/typography.module.css"
-import tableStyles from "../styles/table.module.css"
-import TabGroup from "./TabGroup"
-import watchFieldArrayCode from "./codeExamples/watchFieldArrayCode"
-import StarRepo from "./StarRepo"
-import Link from "next/link"
-
-export default function ApiWatch({ api }: { api: any }) {
-  return (
-    <>
-      <code className={typographyStyles.codeHeading}>
-        <h2>
-          watch:{" "}
-          <span
-            className={typographyStyles.typeText}
-          >{`(names?: string | string[] | (data, options) => void) => unknown`}</span>
-        </h2>
-      </code>
-
-      {api.watch.description}
-
-      <h2 className={typographyStyles.subTitle}>Props</h2>
-
-      <div className={tableStyles.tableWrapper}>
-        <table className={tableStyles.table}>
-          <tbody>
-            <tr>
-              <th
-                style={{
-                  minWidth: 180,
-                }}
-              >
-                {generic.type}
-              </th>
-              <th
-                style={{
-                  minWidth: 200,
-                }}
-              >
-                {generic.description}
-              </th>
-            </tr>
-            <tr>
-              <td>
-                <code className={typographyStyles.typeText}>string</code>
-              </td>
-              <td>{api.watch.tableTitle.single}</td>
-            </tr>
-            <tr>
-              <td>
-                <code className={typographyStyles.typeText}>string[]</code>
-              </td>
-              <td>{api.watch.tableTitle.multiple}</td>
-            </tr>
-            <tr>
-              <td>
-                <code className={typographyStyles.typeText}>undefined</code>
-              </td>
-              <td>{api.watch.tableTitle.all}</td>
-            </tr>
-            <tr>
-              <td>
-                <code
-                  className={typographyStyles.typeText}
-                >{`(data: unknown, { name: string, type: string }) => void`}</code>
-              </td>
-              <td>{api.watch.tableTitle.callback}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <h2 className={typographyStyles.subTitle}>Return</h2>
-
-      <div className={tableStyles.tableWrapper}>
-        <table className={tableStyles.table}>
-          <tbody>
-            <tr>
-              <th
-                style={{
-                  minWidth: 340,
-                }}
-              >
-                {generic.example}
-              </th>
-              <th
-                style={{
-                  minWidth: 180,
-                }}
-              >
-                {generic.return}
-              </th>
-            </tr>
-            <tr>
-              <td>
-                <code>watch('inputName')</code>
-              </td>
-              <td>
-                <code className={typographyStyles.typeText}>unknown</code>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <code>watch(['inputName1'])</code>
-              </td>
-              <td>
-                <code className={typographyStyles.typeText}>unknown[]</code>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <code>watch()</code>
-              </td>
-              <td>
-                <code
-                  className={typographyStyles.typeText}
-                >{`{[key:string]: unknown}`}</code>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <code>{`watch((data, { name, type }) => console.log(data, name, type))`}</code>
-              </td>
-              <td>
-                <code
-                  className={typographyStyles.typeText}
-                >{`{ unsubscribe: () => void }`}</code>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <h2 id="rules" className={typographyStyles.rulesTitle}>
-        Rules
-      </h2>
-
-      <ul>
-        <li>
-          <p>
-            When <code>defaultValue</code> is not defined, the first render of{" "}
-            <code>watch</code> will return <code>undefined</code> because it is
-            called before <code>register</code>. It's <b>recommend</b> to
-            provide <code>defaultValues</code> at <code>useForm</code> to avoid
-            this behaviour, but you can set the inline <code>defaultValue</code>{" "}
-            as the second argument.
-          </p>
-        </li>
-        <li>
-          <p>
-            When both <code>defaultValue</code> and <code>defaultValues</code>{" "}
-            are supplied, <code>defaultValue</code> will be returned.
-          </p>
-        </li>
-        <li>
-          <p>
-            This API will trigger re-render at the root of your app or form,
-            consider using a callback or the{" "}
-            <Link href="/docs/usewatch">useWatch</Link> api if you are
-            experiencing performance issues.
-          </p>
-        </li>
-        <li>
-          <p>
-            <code>watch</code> result is optimised for render phase instead of{" "}
-            <code>useEffect</code>'s deps, to detect value update you may want
-            to use an external custom hook for value comparison.
-          </p>
-        </li>
-      </ul>
-
-      <h2 id="example" className={typographyStyles.subTitle}>
-        Examples
-      </h2>
-
-      <TabGroup buttonLabels={["Form", "Advance Field Array"]}>
-        <CodeArea
-          rawData={watchCode}
-          tsRawData={watchCodeTs}
-          url="https://codesandbox.io/s/react-hook-form-watch-v7-qbxd7"
-          tsUrl="https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d"
-        />
-        <CodeArea
-          rawData={watchFieldArrayCode}
-          url="https://codesandbox.io/s/watch-with-usefieldarray-e2d64"
-        />
-      </TabGroup>
-
-      <h2 className={typographyStyles.subTitle}>Video</h2>
-
-      <p>
-        The following video tutorial demonstrates <code>watch</code> API.
-      </p>
-
-      <iframe
-        width="100%"
-        height="528"
-        title="react hook form controller build"
-        src="https://www.youtube.com/embed/3qLd69WMqKk"
-        frameBorder="0"
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-        allowFullScreen
-      />
-
-      <StarRepo />
-    </>
-  )
-}
diff --git a/src/components/Bday.tsx b/src/components/Bday.tsx
deleted file mode 100644
index 572e00d22..000000000
--- a/src/components/Bday.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { Animate, AnimateGroup } from "react-simple-animate"
-import styles from "./Bday.module.css"
-import Link from "next/link"
-
-const list = [
-  <p key="1">
-    ★ Strictly <strong>typed</strong> form
-  </p>,
-  <p key="2">
-    ★ <strong>Smaller</strong> Package Size (-13%)
-  </p>,
-  <p key="3">
-    ★ More <strong>performant</strong> than ever
-  </p>,
-  <p key="5">
-    ★ New <strong>Resolver</strong> & <strong>DevTools</strong>
-  </p>,
-  <p key="4">★ API Refinements</p>,
-  <p key="8">
-    ★ New custom hook <strong>useFormState</strong>
-  </p>,
-]
-
-export default function CardPlay({ isCardPlay }: { isCardPlay: boolean }) {
-  return (
-    <AnimateGroup play={isCardPlay}>
-      <Animate
-        sequenceIndex={0}
-        start={{ opacity: 0 }}
-        end={{ opacity: 1 }}
-        duration={0.3}
-      >
-        <div id="card" className={styles.root}>
-          <Animate
-            sequenceIndex={1}
-            start={{
-              transform: "translate(20px, 0px)",
-              opacity: "0",
-            }}
-            delay={0.1}
-            easeType="ease-in"
-            render={({ style }) => {
-              return (
-                <div style={style}>
-                  <h1
-                    style={{
-                      fontSize: 110,
-                      marginTop: 20,
-                      marginLeft: 0,
-                      marginBottom: 0,
-                    }}
-                  >
-                    V7 <span>is Live!</span>
-                  </h1>
-
-                  <Animate
-                    sequenceIndex={2}
-                    duration={0.2}
-                    start={{
-                      transform: "translate(0px, 20px) scale(1.1)",
-                    }}
-                    easeType="ease-in"
-                    render={({ style }) => (
-                      <div>
-                        <p>Thanks to the team members:</p>
-                        <div style={style} className={styles.avatars}>
-                          <img
-                            src="https://avatars.githubusercontent.com/u/7545547?s=460&v=4"
-                            alt="jorisre, RHF maintainer"
-                          />
-                          <img
-                            src="https://avatars2.githubusercontent.com/u/12913947?s=120&v=4"
-                            alt="kotarella1110, RHF maintainer"
-                          />
-                          <img
-                            src="https://avatars2.githubusercontent.com/u/10513364?s=120&v=4"
-                            alt="Bill, RHF creator"
-                          />
-                          <img
-                            src="https://avatars3.githubusercontent.com/u/35811186?s=120&v=4"
-                            alt="pmaier, RHF maintainer"
-                          />
-                          <img
-                            src="https://avatars3.githubusercontent.com/u/32805276?s=120&v=4"
-                            alt="JeromeDeLeon, RHF maintainer"
-                          />
-                          <img
-                            src="https://avatars3.githubusercontent.com/u/14539203?s=120&v=4"
-                            alt="adhrinae, RHF maintainer"
-                          />
-                          <img
-                            src="https://avatars2.githubusercontent.com/u/34934510?s=120&v=4"
-                            alt="keiya01, RHF maintainer"
-                          />
-                          <img
-                            src="https://avatars0.githubusercontent.com/u/855184?s=120&v=4"
-                            alt="stramel, RHF maintainer"
-                          />
-                        </div>
-                      </div>
-                    )}
-                  />
-                </div>
-              )
-            }}
-          />
-
-          <Animate
-            sequenceIndex={3}
-            start={{
-              opacity: "0",
-            }}
-            delay={0.1}
-            easeType="ease-in"
-            render={({ style }) => {
-              return (
-                <div className={styles.achievement} style={style}>
-                  <div className={styles.achievementList}>
-                    <h4>
-                      <span role="img" aria-label="gold-medal">
-                        🏅
-                      </span>
-                      <span>Achievements</span>
-                    </h4>
-                    <ul>
-                      {list.map((item, index) => (
-                        <Animate
-                          key={`${index}-name`}
-                          sequenceIndex={index + 3}
-                          start={{
-                            transform: "translateX(10px)",
-                            opacity: 0,
-                          }}
-                          easeType="ease-in"
-                          duration={0.15}
-                          delay={index === 0 ? 0.2 : 0.01}
-                          render={({ style }) => <li style={style}>{item}</li>}
-                        />
-                      ))}
-                    </ul>
-
-                    <Link href="/docs" className={styles.link}>
-                      Check out API
-                    </Link>
-                  </div>
-                </div>
-              )
-            }}
-          />
-        </div>
-      </Animate>
-    </AnimateGroup>
-  )
-}
diff --git a/src/components/CodeArea.tsx b/src/components/CodeArea.tsx
index 9e020c215..8528edfe2 100644
--- a/src/components/CodeArea.tsx
+++ b/src/components/CodeArea.tsx
@@ -3,48 +3,7 @@ import { highlightAllUnder } from "prismjs"
 import ClipBoard from "./ClipBoard"
 import styles from "./CodeArea.module.css"
 import { CSSProperties, useEffect, useRef, useState } from "react"
-
-export const CodeSandBoxLink = ({
-  url,
-  isJS,
-  style,
-  isExpo,
-}: {
-  url: string
-  style?: CSSProperties
-  isExpo?: boolean
-  isJS?: boolean
-}) => (
-  <a
-    className={`${styles.button} ${styles.linkToSandBox}`}
-    style={style}
-    href={url}
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    {!isExpo && (
-      <svg viewBox="0 0 256 296">
-        <g>
-          <path
-            d="M115.497674,261.08837 L115.497674,154.478845 L23.8139535,101.729261 L23.8139535,162.501763 L65.8104558,186.8486 L65.8104558,232.549219 L115.497674,261.08837 Z M139.311628,261.714907 L189.916577,232.563707 L189.916577,185.779949 L232.186047,161.285235 L232.186047,101.27387 L139.311628,154.895035 L139.311628,261.714907 Z M219.971965,80.8276886 L171.155386,52.5391067 L128.292316,77.4106841 L85.1040206,52.5141067 L35.8521355,81.1812296 L127.765737,134.063073 L219.971965,80.8276886 Z M0,222.211907 L0,74.4948807 L127.986799,0 L256,74.1820085 L256,221.978632 L127.983954,295.72283 L0,222.211907 Z"
-            fill="currentColor"
-          />
-        </g>
-      </svg>
-    )}{" "}
-    {isExpo ? "Expo" : "CodeSandbox"}{" "}
-    {typeof isJS === "boolean" && (
-      <sup
-        style={{
-          marginLeft: 5,
-          fontSize: 10,
-        }}
-      >
-        {isJS ? "JS" : "TS"}
-      </sup>
-    )}
-  </a>
-)
+import { CodeSandBoxLink } from "./CodeSandbox"
 
 const ToggleTypes = {
   js: "JS",
diff --git a/src/components/CodeSandbox.tsx b/src/components/CodeSandbox.tsx
new file mode 100644
index 000000000..a4bfb06ea
--- /dev/null
+++ b/src/components/CodeSandbox.tsx
@@ -0,0 +1,40 @@
+import styles from "./CodeArea.module.css"
+
+export const CodeSandBoxLink = ({
+  url,
+  isJS,
+  isExpo,
+}: {
+  url: string
+  isExpo?: boolean
+  isJS?: boolean
+}) => (
+  <a
+    className={`${styles.button} ${styles.linkToSandBox}`}
+    href={url}
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    {!isExpo && (
+      <svg viewBox="0 0 256 296">
+        <g>
+          <path
+            d="M115.497674,261.08837 L115.497674,154.478845 L23.8139535,101.729261 L23.8139535,162.501763 L65.8104558,186.8486 L65.8104558,232.549219 L115.497674,261.08837 Z M139.311628,261.714907 L189.916577,232.563707 L189.916577,185.779949 L232.186047,161.285235 L232.186047,101.27387 L139.311628,154.895035 L139.311628,261.714907 Z M219.971965,80.8276886 L171.155386,52.5391067 L128.292316,77.4106841 L85.1040206,52.5141067 L35.8521355,81.1812296 L127.765737,134.063073 L219.971965,80.8276886 Z M0,222.211907 L0,74.4948807 L127.986799,0 L256,74.1820085 L256,221.978632 L127.983954,295.72283 L0,222.211907 Z"
+            fill="currentColor"
+          />
+        </g>
+      </svg>
+    )}{" "}
+    {isExpo ? "Expo" : "CodeSandbox"}{" "}
+    {typeof isJS === "boolean" && (
+      <sup
+        style={{
+          marginLeft: 5,
+          fontSize: 10,
+        }}
+      >
+        {isJS ? "JS" : "TS"}
+      </sup>
+    )}
+  </a>
+)
diff --git a/src/components/ControllerContent.tsx b/src/components/ControllerContent.tsx
deleted file mode 100644
index 7261391dc..000000000
--- a/src/components/ControllerContent.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import CodeArea from "./CodeArea"
-import controller from "./codeExamples/controller"
-import reactNativeController from "./codeExamples/reactNativeController"
-import generic from "../data/generic"
-import TabGroup from "./TabGroup"
-import typographyStyles from "../styles/typography.module.css"
-import tableStyles from "../styles/table.module.css"
-import controllerTs from "./codeExamples/controllerTs"
-import UseControllerMethods from "./UseControllerMethods"
-import apidata from "../data/api"
-
-export default function ControllerContent({ api }: { api: typeof apidata }) {
-  return (
-    <>
-      <code className={typographyStyles.codeHeading}>
-        <h2>
-          Controller:{" "}
-          <span className={typographyStyles.typeText}>Component</span>
-        </h2>
-      </code>
-
-      {api.Controller.description}
-
-      <h2 className={typographyStyles.subTitle}>Props</h2>
-
-      <p>
-        The following table contains information about the arguments for{" "}
-        <code>Controller</code>.
-      </p>
-
-      <div className={tableStyles.tableWrapper}>
-        <table className={tableStyles.table}>
-          <thead>
-            <tr>
-              <th>{generic.name}</th>
-              <th>{generic.type}</th>
-              <th>{generic.required}</th>
-              <th>{generic.description}</th>
-            </tr>
-          </thead>
-          {api.Controller.table}
-        </table>
-      </div>
-
-      <UseControllerMethods isController />
-
-      <h2 id="example" className={typographyStyles.subTitle}>
-        Examples
-      </h2>
-
-      <TabGroup buttonLabels={["Web", "React Native"]}>
-        <CodeArea
-          rawData={controller}
-          url="https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5"
-          tsRawData={controllerTs}
-          tsUrl="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
-        />
-        <CodeArea
-          rawData={reactNativeController}
-          isExpo
-          url="https://snack.expo.io/@bluebill1049/react-hook-form-v7---controller"
-        />
-      </TabGroup>
-
-      <h2 className={typographyStyles.subTitle}>Video</h2>
-      <p>
-        The following video showcases what's inside Controller and how its been
-        built.
-      </p>
-
-      <iframe
-        width="100%"
-        height="528"
-        title="react hook form controller build"
-        src="https://www.youtube.com/embed/N2UNk_UCVyA"
-        frameBorder="0"
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-        allowFullScreen
-      />
-
-      {api.Controller.tips}
-    </>
-  )
-}
diff --git a/src/components/FormContext.tsx b/src/components/FormContext.tsx
deleted file mode 100644
index 05e4b87a6..000000000
--- a/src/components/FormContext.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import CodeArea from "./CodeArea"
-import formContext from "./codeExamples/formContext"
-import typographyStyles from "../styles/typography.module.css"
-import Link from "next/link"
-
-export default function FormContext({ api }) {
-  return (
-    <>
-      <code className={typographyStyles.codeHeading}>
-        <h2>
-          useFormContext:{" "}
-          <span className={typographyStyles.typeText}>Function</span>
-        </h2>
-      </code>
-
-      {api.useFormContext.introduction}
-
-      <h2 className={typographyStyles.subTitle}>Return</h2>
-
-      <p>This hook will return all the useForm return methods and props.</p>
-
-      <CodeArea
-        rawData={`const methods = useForm()
-      
-<FormProvider {...methods} /> // all the useForm return props
-      
-const methods = useFormContext() // retrieve those props`}
-      />
-
-      {api.useFormContext.description}
-
-      <h2 id="rules" className={typographyStyles.rulesTitle}>
-        Rules
-      </h2>
-
-      <p>
-        You need to wrap your form with the{" "}
-        <Link href="/docs/formprovider">
-          <code>FormProvider</code>
-        </Link>{" "}
-        component for <code>useFormContext</code> to work properly.
-      </p>
-
-      <h2 id="example" className={typographyStyles.subTitle}>
-        Examples
-      </h2>
-
-      <CodeArea
-        rawData={formContext}
-        url="https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi"
-      />
-    </>
-  )
-}
diff --git a/src/components/SideMenu.tsx b/src/components/SideMenu.tsx
deleted file mode 100644
index 94fe43a40..000000000
--- a/src/components/SideMenu.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import { memo } from "react"
-import colors from "../styles/colors"
-import generic from "../data/generic"
-import styles from "./SideMenu.module.css"
-import typographyStyles from "../styles/typography.module.css"
-
-const activateStyle = { borderBottom: `1px solid ${colors.lightPink}` }
-
-export const animateProps = {
-  play: true,
-  start: {
-    opacity: 0,
-    transform: "translateX(-30px)",
-  },
-  end: {
-    opacity: 1,
-  },
-  easeType: "cubic-bezier(0.37, 0, 0.63, 1)",
-}
-
-const excludeTitles = [
-  "useformcontext",
-  "controller",
-  "usefieldarray",
-  "usewatch",
-  "usecontroller",
-  "errormessage",
-  "validationschema",
-  "validationresolver",
-  "browser built-in validation",
-]
-
-function SideMenu({
-  links,
-  goToSection,
-  enLinks,
-  isStatic,
-  activeIndex,
-  version,
-}: {
-  links: any
-  goToSection: (name: any, animate?: boolean) => void
-  isStatic?: boolean
-  enLinks: any
-  activeIndex?: number
-  version?: number
-}) {
-  return (
-    <aside className={styles.menu}>
-      <div>
-        <div className={styles.titleList}>
-          <h4
-            className={typographyStyles.title}
-            style={{
-              fontSize: 16,
-              color: colors.lightBlue,
-            }}
-          >
-            {generic.menu}
-          </h4>
-        </div>
-
-        <ul className="scrollArea">
-          {links.map((rawLink, index) => {
-            const link =
-              typeof rawLink === "function" ? rawLink().title : rawLink.title
-            const enLink =
-              typeof enLinks[index] === "function"
-                ? enLinks[index]().title
-                : enLinks[index].title
-
-            let linkName = link.startsWith("use") ? `♆ ${link}` : link
-
-            if (
-              /^[A-Z]/.test(link[0]) &&
-              !link.includes(" ") &&
-              link !== "TypeScript"
-            ) {
-              linkName = "❒ " + linkName
-            }
-
-            if (
-              excludeTitles.includes((link || "").toLowerCase()) ||
-              isStatic
-            ) {
-              return (
-                <li key={`menu-${index}`}>
-                  <code aria-hidden className={styles.code}>{`</>`}</code>
-                  {isStatic ? (
-                    <button
-                      onClick={() => {
-                        goToSection(enLink, index)
-                      }}
-                      style={{
-                        top: "-3px",
-                        position: "relative",
-                        ...(activeIndex === index ? activateStyle : {}),
-                      }}
-                    >
-                      {linkName}
-                    </button>
-                  ) : (
-                    <button
-                      onClick={() => {
-                        goToSection(enLink, index)
-                      }}
-                      style={{
-                        top: "-3px",
-                        position: "relative",
-                        ...(link === "Quick Start" ? { paddingLeft: 0 } : null),
-                        ...(activeIndex === index ? activateStyle : {}),
-                      }}
-                    >
-                      {linkName}
-                      {rawLink.size && (
-                        <span className={styles.size}>~ {rawLink.size}</span>
-                      )}
-                    </button>
-                  )}
-                </li>
-              )
-            }
-
-            return (
-              <li
-                key={`menu-${index}`}
-                // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
-                role="link"
-                onClick={() => goToSection(enLink, index)}
-                onKeyDown={(e) => {
-                  if (e.keyCode === 13) {
-                    goToSection(enLink, index)
-                  }
-                }}
-                style={{
-                  ...(index > 0
-                    ? {
-                        marginLeft: 10,
-                        ...(index !== links.length - (version === 6 ? 7 : 8)
-                          ? { borderLeft: `1px solid ${colors.lightPink}` }
-                          : null),
-                        ...(index === 3
-                          ? { paddingTop: 10, marginTop: -15 }
-                          : null),
-                      }
-                    : null),
-                }}
-              >
-                <span
-                  className={`${styles.arrow} ${
-                    index === links.length - (version === 6 ? 7 : 8)
-                      ? styles.arrowLast
-                      : ""
-                  }`}
-                >
-                  {index > 0 && (
-                    <span
-                      style={{
-                        left: 1,
-                        top: -1,
-                        position: "relative",
-                      }}
-                    >
-                      ╴
-                    </span>
-                  )}
-                </span>
-                {link !== "Quick Start" && (
-                  <code aria-hidden className={styles.code}>{`</>`}</code>
-                )}{" "}
-                <button
-                  style={{
-                    top: "-3px",
-                    position: "relative",
-                    ...(link === "Quick Start" ? { paddingLeft: 0 } : null),
-                    ...(activeIndex === index ? activateStyle : {}),
-                  }}
-                >
-                  {linkName}
-                  {rawLink.size && (
-                    <span className={styles.size}>~ {rawLink.size}</span>
-                  )}
-                </button>
-              </li>
-            )
-          })}
-
-          <li>
-            <code aria-hidden className={styles.code}>{`</>`}</code>
-            <a
-              rel="noopener noreferrer"
-              href="https://github.com/react-hook-form/react-hook-form/tree/master/examples"
-              target="_blank"
-            >
-              {generic.codeExample}
-            </a>
-          </li>
-        </ul>
-      </div>
-    </aside>
-  )
-}
-
-export default memo(SideMenu)
diff --git a/src/components/TabGroup.tsx b/src/components/TabGroup.tsx
index cff7ce67a..455f595f7 100644
--- a/src/components/TabGroup.tsx
+++ b/src/components/TabGroup.tsx
@@ -8,7 +8,7 @@ const TabGroup = ({ children, buttonLabels }) => {
     <div>
       <div
         className={styles.buttonTabGroup}
-        style={{ marginBottom: -15, marginTop: 30 }}
+        style={{ marginBottom: -15, marginTop: 15 }}
       >
         {buttonLabels.map((label, currentIndex) => (
           <button
diff --git a/src/components/UseForm.tsx b/src/components/UseForm.tsx
index 04233f510..afd3a750d 100644
--- a/src/components/UseForm.tsx
+++ b/src/components/UseForm.tsx
@@ -1,24 +1,10 @@
 import Footer from "./Footer"
-import { Menu, pages } from "./Menu"
-import CodeArea, { CodeSandBoxLink } from "./CodeArea"
-import Popup from "./Popup"
-import generic from "../data/generic"
-import ValidationResolver from "./ValidationResolver"
-import api from "../data/api"
+import { Menu } from "./Menu"
 import typographyStyles from "../styles/typography.module.css"
 import containerStyles from "../styles/container.module.css"
-import shouldUseNativeValidation from "./codeExamples/shouldUseNativeValidation"
 import StarRepo from "./StarRepo"
 import { SelectNav } from "./selectNav"
-import Link from "next/link"
-import { CSSProperties } from "react"
-import UseFormContent from "../content/docs/use-form.mdx"
-
-const codeSandBoxStyle: CSSProperties = {
-  position: "relative",
-  left: 0,
-  float: "right",
-}
+import UseFormContent from "../content/use-form.mdx"
 
 const UseForm = () => {
   return (
diff --git a/src/components/UseFormContext.tsx b/src/components/UseFormContext.tsx
deleted file mode 100644
index 7d00a9d66..000000000
--- a/src/components/UseFormContext.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import api from "../data/api"
-import typographyStyles from "../styles/typography.module.css"
-import FormContext from "./FormContext"
-import Footer from "./Footer"
-import { Menu } from "./Menu"
-import containerStyles from "../styles/container.module.css"
-import StarRepo from "./StarRepo"
-
-export default function UseFieldArray() {
-  return (
-    <div className={containerStyles.container}>
-      <h1 className={typographyStyles.headingWithTopMargin} id="main">
-        useFormContext
-      </h1>
-      <p className={typographyStyles.subHeading}>
-        React Context API for hook form
-      </p>
-
-      <div className={containerStyles.wrapper}>
-        <Menu />
-
-        <main>
-          <FormContext api={api} />
-
-          <StarRepo />
-
-          <Footer />
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/ValidationResolver.tsx b/src/components/ValidationResolver.tsx
deleted file mode 100644
index 9e7ae9b8e..000000000
--- a/src/components/ValidationResolver.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import CodeArea from "./CodeArea"
-import validationResolver from "./codeExamples/validationResolver"
-import joiResolver from "./codeExamples/joiResolver"
-import joiResolverTs from "./codeExamples/joiResolverTs"
-import ajvResolver from "./codeExamples/ajvResolver"
-import validationResolverTs from "./codeExamples/validationResolverTs"
-import TabGroup from "./TabGroup"
-import validationSchema from "./codeExamples/validationSchema"
-import validationSchemaTs from "./codeExamples/validationSchemaTs"
-import zodResolver from "./codeExamples/zodResolver"
-import zodResolverTs from "./codeExamples/zodResolverTs"
-import typographyStyles from "../styles/typography.module.css"
-import vestResolver from "./codeExamples/vestResolver"
-import tableStyles from "../styles/table.module.css"
-import generic from "../data/generic"
-import Link from "next/link"
-
-export default function ValidationResolver({ api }: { api: any }) {
-  return (
-    <>
-      <h5
-        className={typographyStyles.h5}
-        style={{ marginTop: 20 }}
-        id="resolver"
-      >
-        <code>
-          resolver:{" "}
-          <Link href="/ts#Resolver">
-            <span className={typographyStyles.typeText}>Resolver</span>
-          </Link>
-        </code>
-      </h5>
-
-      {api.resolver.description}
-
-      <h3 className={typographyStyles.subTitle}>Props</h3>
-
-      <div className={tableStyles.tableWrapper}>
-        <table className={tableStyles.table}>
-          <tbody>
-            <tr>
-              <th>{generic.name}</th>
-              <th>{generic.type}</th>
-              <th>{generic.description}</th>
-            </tr>
-            <tr>
-              <td>
-                <p>
-                  <code>values</code>
-                </p>
-              </td>
-              <td>
-                <code className={typographyStyles.typeText}>object</code>
-              </td>
-              <td>
-                <p>This object contains the entire form values.</p>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <p>
-                  <code>context</code>
-                </p>
-              </td>
-              <td>
-                <code className={typographyStyles.typeText}>object</code>
-              </td>
-              <td>
-                <p>
-                  This is the <code>context</code> object which you can provide
-                  to the <code>useForm</code> config. It is a mutable{" "}
-                  <code>object</code> that can be changed on each re-render.
-                </p>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <p>
-                  <code>options</code> <br />
-                </p>
-              </td>
-              <td>
-                <code className={typographyStyles.typeText}>{`{ 
-  criteriaMode: string, 
-  fields: object, 
-  names: string[] 
-}`}</code>
-              </td>
-              <td>
-                <p>
-                  This is the option object containing information about the
-                  validated fields, names and <code>criteriaMode</code> from{" "}
-                  <code>useForm</code>.
-                </p>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <h3 id="schema-rules" className={typographyStyles.rulesTitle}>
-        Rules
-      </h3>
-
-      <ul>
-        <li>
-          <p>
-            Schema validation focuses on field-level error reporting.
-            Parent-level error checking is limited to the direct parent level,
-            which is applicable for components such as group checkboxes.
-          </p>
-        </li>
-
-        <li>
-          <p>This function will be cached.</p>
-        </li>
-
-        <li>
-          <p>
-            Re-validation of an input will only occur one field at time during a
-            user’s interaction. The lib itself will evaluate the{" "}
-            <code>error</code> object to trigger a re-render accordingly.
-          </p>
-        </li>
-
-        <li>
-          <p>
-            A resolver can not be used with the built-in validators (e.g.:{" "}
-            required, min, etc.)
-          </p>
-        </li>
-
-        <li>
-          <p>When building a custom resolver:</p>
-
-          <ul>
-            <li>
-              <p>
-                Make sure that you return an object with both{" "}
-                <code>values</code> and <code>errors</code> properties. Their
-                default values should be an empty object. For example:{" "}
-                <code>{`{}`}</code>.
-              </p>
-            </li>
-
-            <li>
-              <p>
-                The keys of the <code>error</code> object should match the{" "}
-                <code>name</code> values of your fields.
-              </p>
-            </li>
-          </ul>
-        </li>
-      </ul>
-
-      <h3 id="resolver-example" className={typographyStyles.subTitle}>
-        Examples
-      </h3>
-
-      <TabGroup buttonLabels={["Yup", "Zod", "Joi", "Ajv", "Vest", "Custom"]}>
-        <CodeArea
-          rawData={validationSchema}
-          tsRawData={validationSchemaTs}
-          url="https://codesandbox.io/s/react-hook-form-validationschema-v7-bt78h"
-          tsUrl="https://codesandbox.io/s/react-hook-form-apply-validation-ts-forked-nmbyh"
-        />
-        <CodeArea
-          rawData={zodResolver}
-          tsRawData={zodResolverTs}
-          url="https://codesandbox.io/s/react-hook-form-zod-resolver-example-io911"
-          tsUrl="https://codesandbox.io/s/react-hook-form-zod-resolver-ts-example-forked-w72vp"
-        />
-        <CodeArea
-          rawData={joiResolver}
-          tsRawData={joiResolverTs}
-          url="https://codesandbox.io/s/react-hook-form-joiresolver-v7-kmn0d"
-          tsUrl="https://codesandbox.io/s/react-hook-form-joiresolver-v6-ts-forked-5pseh"
-        />
-        <CodeArea
-          rawData={ajvResolver}
-          url="https://codesandbox.io/s/react-hook-form-ajvresolver-vr3imc"
-        />
-        <CodeArea
-          rawData={vestResolver}
-          url="https://codesandbox.io/s/vest-8q874"
-        />
-        <CodeArea
-          rawData={validationResolver}
-          tsRawData={validationResolverTs}
-          url="https://codesandbox.io/s/react-hook-form-customresoliver-v7-8mpqw"
-          tsUrl="https://codesandbox.io/s/react-hook-form-customresoliver-ts-v7-juc63"
-        />
-      </TabGroup>
-
-      <p>
-        Need more? See{" "}
-        <a
-          href="https://github.com/react-hook-form/resolvers#quickstart"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Resolver Documentation
-        </a>
-      </p>
-
-      <h3 id="schema-rules" className={typographyStyles.rulesTitle}>
-        Tip
-      </h3>
-
-      <p>You can debug your schema via the following code snippet:</p>
-      <CodeArea
-        rawData={`resolver: async (data, context, options) => {
-  // you can debug your validation schema here
-  console.log('formData', data)
-  console.log('validation result', await anyResolver(schema)(data, context, options))
-  return anyResolver(schema)(data, context, options)
-},`}
-      />
-    </>
-  )
-}
diff --git a/src/components/VideoList.module.css b/src/components/VideoList.module.css
deleted file mode 100644
index d8bd38bca..000000000
--- a/src/components/VideoList.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.list {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.list > span {
-  border: 1px solid white;
-  margin-right: 20px;
-}
-
-.list:hover > span {
-  transition: 0.3s;
-  color: var(--color-light-pink);
-}
-
-.list a {
-  text-decoration: none;
-}
-
-.list:hover a {
-  text-decoration: underline;
-}
diff --git a/src/components/VideoList.tsx b/src/components/VideoList.tsx
deleted file mode 100644
index cb3bcc8b6..000000000
--- a/src/components/VideoList.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Animate } from "react-simple-animate"
-import styles from "./VideoList.module.css"
-
-const VideoList = ({
-  lists,
-  play,
-}: {
-  lists: { title: string; url: string }[]
-  play: boolean
-}) => (
-  <Animate
-    start={{ maxHeight: 0, overflow: "hidden" }}
-    end={{ maxHeight: lists.length * 50, overflow: "hidden" }}
-    easeType="ease-in"
-    play={play}
-  >
-    <ul style={{ listStyle: "none", padding: 0, margin: "0 0 0 8px" }}>
-      {lists.map(({ url, title }) => (
-        <li key={title}>
-          <p className={styles.list}>
-            <span
-              style={{
-                width: 24,
-                height: 24,
-                fontSize: 20,
-                display: "inline-flex",
-                alignItems: "center",
-                justifyContent: "center",
-                borderRadius: "50%",
-              }}
-            >
-              ▸
-            </span>
-            <a
-              style={{ color: "currentColor" }}
-              href={url}
-              target="_blank"
-              rel="noopener noreferrer"
-              title={title}
-            >
-              {title}
-            </a>
-          </p>
-        </li>
-      ))}
-    </ul>
-  </Animate>
-)
-
-export default VideoList
diff --git a/src/components/codeExamples/ErrorCodeTypes.ts b/src/components/codeExamples/ErrorCodeTypes.ts
deleted file mode 100644
index 9edaf7942..000000000
--- a/src/components/codeExamples/ErrorCodeTypes.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-export default `import React from "react";
-import { useForm } from "react-hook-form";
-type Inputs = {
-  a: number;
-  b: string;
-  c: Date;
-  d: {
-    e: string;
-  };
-  f: {
-    g: number[];
-    h: string[];
-    i: { j: string }[];
-  };
-  k: any;
-  l: any[];
-  m: unknown;
-  n: unknown[];
-  o: object;
-  p: object[];
-  q: {
-    r: any;
-    s: {
-      t: any[];
-      u: unknown;
-      v: object;
-    }[];
-    w: Date[];
-    x: {
-      y: {
-        z: object[];
-      };
-    };
-  };
-};
-export default function App() {
-  const { formState: { errors } } = useForm<Inputs>();
-  console.log(errors?.a?.message);
-  console.log(errors?.b?.message);
-  console.log(errors?.c?.message);
-  console.log(errors?.d?.e?.message);
-  console.log(errors?.f?.g && errors.f.g[0] && errors.f.g[0].message
-  );
-  console.log(errors?.f?.h && errors.f.h[0] && errors.f.h[0].message
-  );
-  console.log(
-      errors?.f?.i &&
-      errors?.f?.i[0] &&
-      errors.f.i[0].j &&
-      errors.f.i[0].j.message
-  );
-  console.log(errors?.k?.message);
-  console.log(errors?.l?.message);
-  console.log(errors?.m?.message);
-  console.log(errors?.n && errors.n[0] && errors.n[0].message);
-  console.log(errors?.o?.message);
-  console.log(errors?.p && errors.p[0] && errors.p[0].message);
-  console.log(errors?.q?.r?.message);
-  console.log(
-    errors?.q?.s && errors.q.s[0] && errors.q.s[0].t.message
-  );
-  console.log(
-      errors?.q?.s &&
-      errors.q.s[0] &&
-      errors.q.s[0].u &&
-      errors.q.s[0].u.message
-  );
-  console.log(
-      errors?.q?.s &&
-      errors.q.s[0] &&
-      errors.q.s[0].v &&
-      errors.q.s[0].v.message
-  );
-  console.log(errors?.q?.w && errors.q.w[0] && errors.q.w[0].message
-  );
-  console.log(
-      errors?.q?.x?.y?.z &&
-      errors.q.x.y.z[0] &&
-      errors.q.x.y.z[0].message
-  );
-  return <form />;
-}
-`
diff --git a/src/components/codeExamples/accessibleCode.ts b/src/components/codeExamples/accessibleCode.ts
deleted file mode 100644
index 94430aa51..000000000
--- a/src/components/codeExamples/accessibleCode.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export default `import React from "react";
-import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register, handleSubmit, formState: { errors } } = useForm();
-  const onSubmit = data => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <label htmlFor="firstName">First name</label>
-      <input
-        id="firstName"
-        aria-invalid={errors.firstName ? "true" : "false"}
-        {...register('firstName', { required: true })}
-      />
-      {errors.firstName && (
-        <span role="alert">
-          This field is required
-        </span>
-      )}
-
-      <input type="submit" />
-    </form>
-  );
-}`
diff --git a/src/components/codeExamples/accessibleCodeBase.ts b/src/components/codeExamples/accessibleCodeBase.ts
deleted file mode 100644
index 4aac06467..000000000
--- a/src/components/codeExamples/accessibleCodeBase.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export default `import React from "react";
-import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register, handleSubmit, formState: { errors } } = useForm();
-  const onSubmit = data => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <label htmlFor="name">Name</label>
-      <input id="name" {...register('name', { required: true, maxLength: 30 })} />
-      {errors.name && errors.name.type === "required" && <span>This is required</span>}
-      {errors.name && errors.name.type === "maxLength" && <span>Max length exceeded</span> }
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/accessibleCodeFinal.ts b/src/components/codeExamples/accessibleCodeFinal.ts
deleted file mode 100644
index 2e56d8c2b..000000000
--- a/src/components/codeExamples/accessibleCodeFinal.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export default `import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register, handleSubmit, formState: { errors } } = useForm();
-  const onSubmit = (data) => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <label htmlFor="name">Name</label>
-
-      {/* use aria-invalid to indicate field contain error */}
-      <input
-        id="name"
-        aria-invalid={errors.name ? "true" : "false"}
-        {...register('name', { required: true, maxLength: 30 })}
-      />
-      
-      {/* use role="alert" to announce the error message */}
-      {errors.name && errors.name.type === "required" && (
-        <span role="alert">This is required</span>
-      )}
-      {errors.name && errors.name.type === "maxLength" && (
-        <span role="alert">Max length exceeded</span>
-      )}
-      
-      <input type="submit" />
-    </form>
-  );
-}
-
-`
diff --git a/src/components/codeExamples/ajvResolver.tsx b/src/components/codeExamples/ajvResolver.tsx
deleted file mode 100644
index 228b7b9e4..000000000
--- a/src/components/codeExamples/ajvResolver.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-export default `import { useForm } from 'react-hook-form';
-import { ajvResolver } from '@hookform/resolvers/ajv';
-
-// must use \`minLength: 1\` to implement required field
-const schema = {
-  type: 'object',
-  properties: {
-    username: {
-      type: 'string',
-      minLength: 1,
-      errorMessage: { minLength: 'username field is required' },
-    },
-    password: {
-      type: 'string',
-      minLength: 1,
-      errorMessage: { minLength: 'password field is required' },
-    },
-  },
-  required: ['username', 'password'],
-  additionalProperties: false,
-};
-
-const App = () => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm({
-    resolver: ajvResolver(schema),
-  });
-
-  return (
-    <form onSubmit={handleSubmit((data) => console.log(data))}>
-      <input {...register('username')} />
-      {errors.username && <p>{errors.username.message}</p>}
-      <input {...register('password')} />
-      {errors.password && <p>{errors.password.message}</p>}
-      <button type="submit">submit</button>
-    </form>
-  );
-};
-`
diff --git a/src/components/codeExamples/asyncDefaultValue.ts b/src/components/codeExamples/asyncDefaultValue.ts
deleted file mode 100644
index b6110be7a..000000000
--- a/src/components/codeExamples/asyncDefaultValue.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export default `function App() {
-  const { register, handleSubmit } = useForm({
-    defaultValues: async () => {
-      const response = await fetch('/api')
-      return await response.json() // return { firstName: '', lastName: '' }
-    }
-  });
-}`
diff --git a/src/components/codeExamples/asyncValues.ts b/src/components/codeExamples/asyncValues.ts
deleted file mode 100644
index bbb90b92f..000000000
--- a/src/components/codeExamples/asyncValues.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export default `function App() {
-  const { data } = useQuery(); // data returns { firstName: '', lastName: '' }
-  const { register, handleSubmit } = useForm({
-    values: data,
-    resetOptions: {
-      keepDirtyValues: true, // keep dirty fields unchanged, but update defaultValues
-    }
-  });
-}`
diff --git a/src/components/codeExamples/clearError.ts b/src/components/codeExamples/clearError.ts
deleted file mode 100644
index ac260d568..000000000
--- a/src/components/codeExamples/clearError.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export default `import * as React from "react";
-import { useForm } from "react-hook-form";
-
-const App = () => {
-  const { register, formState: { errors }, handleSubmit, clearErrors } = useForm();
-  const onSubmit = data => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register('firstName', { required: true })} />
-      <input {...register('lastName', { required: true })} />
-      <input {...register('username', { required: true })} />
-      <button type="button" onClick={() => clearErrors("firstName")}>
-        Clear First Name Errors
-      </button>
-      <button
-        type="button"
-        onClick={() => clearErrors(["firstName", "lastName"])}
-      >
-        Clear First and Last Name Errors
-      </button>
-      <button type="button" onClick={() => clearErrors()}>
-        Clear All Errors
-      </button>
-      <input type="submit" />
-    </form>
-  );
-};
-`
diff --git a/src/components/codeExamples/clearErrorTs.ts b/src/components/codeExamples/clearErrorTs.ts
deleted file mode 100644
index df1e1a5ff..000000000
--- a/src/components/codeExamples/clearErrorTs.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-export default `import * as React from "react";
-import { useForm } from "react-hook-form";
-
-type FormInputs = {
-  firstName: string;
-  lastName: string;
-  username: string;
-};
-
-const App = () => {
-  const { register, formState: { errors }, handleSubmit, clearErrors } = useForm<FormInputs>();
-
-  const onSubmit = (data: FormInputs) => {
-    console.log(data)
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register('firstName', { required: true })} />
-      <input {...register('lastName', { required: true })} />
-      <input {...register('username', { required: true })} />
-      <button type="button" onClick={() => clearErrors("firstName")}>
-        Clear First Name Errors
-      </button>
-      <button
-        type="button"
-        onClick={() => clearErrors(["firstName", "lastName"])}
-      >
-        Clear First and Last Name Errors
-      </button>
-      <button type="button" onClick={() => clearErrors()}>
-        Clear All Errors
-      </button>
-      <input type="submit" />
-    </form>
-  );
-};
-`
diff --git a/src/components/codeExamples/conditionalComponent.tsx b/src/components/codeExamples/conditionalComponent.tsx
deleted file mode 100644
index 74b8e9d8a..000000000
--- a/src/components/codeExamples/conditionalComponent.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-export default `import * as React from "react";
-import { useForm } from "react-hook-form";
-import { ModalForm } from "./ModalForm";
-
-type FormValues = {
-  toggle: boolean;
-  mail: string;
-  ghost: string;
-  keepValue: string;
-};
-
-export default function App() {
-  const [modalFormData, setModalFormData] = React.useState("");
-  const { watch, register, setValue, getValues, handleSubmit } = useForm<FormValues>();
-  const [showModal, setShowModal] = React.useState(false);
-  const { toggle, mail } = watch();
-  
-  React.useEffect(() => {
-    setValue("mail", modalFormData);
-  }, [setValue, modalFormData]);
-
-  const onSubmit = (data: FormValues) => console.log(data);
-
-  return (
-    <>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <input type="checkbox" name="toggle" ref={register} />
-        {toggle && (
-          <button type="button" onClick={() => setShowModal(!showModal)}>
-            Show Modal
-          </button>
-        )}
-
-        <input name="mail" placeholder="mail" ref={register} />
-
-        <input
-          name="keepValue"
-          placeholder="keepValue"
-          ref={register}
-          style={{
-            display: toggle ? "block" : "none" // toggle the visbility of an input
-          }}
-        />
-
-        <input type="submit" />
-      </form>
-
-      {/* working with a modal pop up, make sure to create separate form */}
-      {showModal && (
-        <ModalForm mail={mail} setModalFormData={setModalFormData} />
-      )}
-    </>
-  );
-}
-`
diff --git a/src/components/codeExamples/connectForm.ts b/src/components/codeExamples/connectForm.ts
deleted file mode 100644
index 47c287660..000000000
--- a/src/components/codeExamples/connectForm.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export default `import { FormProvider, useForm, useFormContext } from "react-hook-form";
-
-export const ConnectForm = ({ children }) => {
- const methods = useFormContext();
- 
- return children({ ...methods });
-};
-
-export const DeepNest = () => (
-  <ConnectForm>
-    {({ register }) => <input {...register("deepNestedInput")} />}
-  </ConnectForm>
-);
-
-export const App = () => {
-  const methods = useForm();
-  
-  return (
-    <FormProvider {...methods} >
-      <form>
-        <DeepNest />
-      </form>
-    </FormProvider>
-  );
-}
-`
diff --git a/src/components/codeExamples/control.ts b/src/components/codeExamples/control.ts
deleted file mode 100644
index 4483eabe9..000000000
--- a/src/components/codeExamples/control.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export default `import { useForm, Controller } from "react-hook-form";
-
-function App() {
-  const { control } = useForm();
-  
-  return (
-    <Controller
-      render={({ field }) => <input {...field} />}
-      name="firstName"
-      control={control}
-      defaultValue=""
-    />
-  );
-}
-`
diff --git a/src/components/codeExamples/controlTs.ts b/src/components/codeExamples/controlTs.ts
deleted file mode 100644
index 0a3e07f02..000000000
--- a/src/components/codeExamples/controlTs.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export default `import React from "react";
-import { useForm, Controller } from "react-hook-form";
-import { TextField } from "@material-ui/core";
-
-type FormInputs = {
-  firstName: string
-}
-
-function App() {
-  const { control, handleSubmit } = useForm<FormInputs>();
-  const onSubmit = (data: FormInputs) => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Controller
-        as={TextField}
-        name="firstName"
-        control={control}
-        defaultValue=""
-      />
-      
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/controlled.ts b/src/components/codeExamples/controlled.ts
deleted file mode 100644
index 161bc32fb..000000000
--- a/src/components/codeExamples/controlled.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-export default `import React, { useEffect } from "react";
-import { useForm } from "react-hook-form";
-
-function App() {
-  const { register, watch, setValue, handleSubmit } = useForm({
-    defaultValues: {
-      firstName: "",
-      lastName: ""
-    }
-  });
-  const { firstName, lastName } = watch();
-
-  useEffect(() => {
-    register("firstName");
-    register("lastName");
-  }, [register]);
-
-  const handleChange = (e, name) => {
-    setValue(name, e.target.value);
-  };
-
-  const onSubmit = data => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input
-        onChange={(e) => handleChange(e, "firstName")}
-        value={firstName}
-      />
-
-      <input onChange={(e) => handleChange(e, "lastName")} value={lastName} />
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/controlledMixedUncontrolled.ts b/src/components/codeExamples/controlledMixedUncontrolled.ts
deleted file mode 100644
index e5f4f76c5..000000000
--- a/src/components/codeExamples/controlledMixedUncontrolled.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-export default `import React, { useEffect } from "react";
-import { Input, Select, MenuItem } from "@material-ui/core";
-import { useForm } from "react-hook-form";
-
-const defaultValues = {
-  select: "",
-  input: ""
-};
-
-function App() {
-  const { register, handleSubmit, setValue, reset, watch } = useForm({ defaultValues });
-  const selectValue = watch("select");
-  const onSubmit = data => console.log(data);
-
-  useEffect(() => {
-    register({ name: "select" });
-  }, [register]);
-
-  const handleChange = e => setValue("select", e.target.value);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Select value={selectValue} onChange={handleChange}>
-        <MenuItem value={10}>Ten</MenuItem>
-        <MenuItem value={20}>Twenty</MenuItem>
-      </Select>
-      <Input {...register("input")} />
-      
-      <button type="button" onClick={() => reset({ ...defaultValues })}>Reset</button>
-      <input type="submit" />
-    </form>
-  );
-}
-
-`
diff --git a/src/components/codeExamples/controlledMixedUncontrolledInput.ts b/src/components/codeExamples/controlledMixedUncontrolledInput.ts
deleted file mode 100644
index eda3525d7..000000000
--- a/src/components/codeExamples/controlledMixedUncontrolledInput.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-export default `import React, { useEffect } from "react";
-import { Input, Select, MenuItem } from "@material-ui/core";
-import { useForm, Controller } from "react-hook-form";
-
-const defaultValues = {
-  select: "",
-  input: ""
-};
-
-function App() {
-  const { handleSubmit, reset, watch, control, register } = useForm({ defaultValues });
-  const onSubmit = data => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Controller
-        render={
-          ({ field }) => <Select {...field}>
-            <MenuItem value={10}>Ten</MenuItem>
-            <MenuItem value={20}>Twenty</MenuItem>
-          </Select>
-        }
-        control={control}
-        name="select"
-        defaultValue={10}
-      />
-      
-      <Input {...register("input")} />
-
-      <button type="button" onClick={() => reset({ defaultValues })}>Reset</button>
-      <input type="submit" />
-    </form>
-  );
-}
-
-`
diff --git a/src/components/codeExamples/controller.ts b/src/components/codeExamples/controller.ts
deleted file mode 100644
index 8ea488ccc..000000000
--- a/src/components/codeExamples/controller.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export default `import React from "react";
-import ReactDatePicker from "react-datepicker";
-import { TextField } from "@material-ui/core";
-import { useForm, Controller } from "react-hook-form";
-
-function App() {
-  const { handleSubmit, control } = useForm();
-
-  return (
-    <form onSubmit={handleSubmit(data => console.log(data))}>
-      <Controller
-        control={control}
-        name="ReactDatepicker"
-        render={({ field: { onChange, onBlur, value, ref } }) => (
-          <ReactDatePicker
-            onChange={onChange}
-            onBlur={onBlur}
-            selected={value}
-          />
-        )}
-      />
-      
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/controllerTs.ts b/src/components/codeExamples/controllerTs.ts
deleted file mode 100644
index eb38bd47f..000000000
--- a/src/components/codeExamples/controllerTs.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export default `import ReactDatePicker from "react-datepicker";
-import { TextField } from "@material-ui/core";
-import { useForm, Controller } from "react-hook-form";
-
-type FormValues = {
-  ReactDatepicker: string;
-} 
-
-function App() {
-  const { handleSubmit, control } = useForm<FormValues>();
-
-  return (
-    <form onSubmit={handleSubmit(data => console.log(data))}>
-      <Controller
-        control={control}
-        name="ReactDatepicker"
-        render={({ field: { onChange, onBlur, value, ref } }) => (
-          <ReactDatePicker
-            onChange={onChange} // send value to hook form
-            onBlur={onBlur} // notify when input is touched/blur
-            selected={value}
-          />
-        )}
-      />
-      
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/customHookWithValidationResolver.tsx b/src/components/codeExamples/customHookWithValidationResolver.tsx
deleted file mode 100644
index 554f6ec3c..000000000
--- a/src/components/codeExamples/customHookWithValidationResolver.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-export default `import React, { useCallback, useMemo } from "react";
-import { useForm } from "react-hook-form";
-import * as yup from "yup";
-
-const useYupValidationResolver = validationSchema =>
-  useCallback(
-    async data => {
-      try {
-        const values = await validationSchema.validate(data, {
-          abortEarly: false
-        });
-
-        return {
-          values,
-          errors: {}
-        };
-      } catch (errors) {
-        return {
-          values: {},
-          errors: errors.inner.reduce(
-            (allErrors, currentError) => ({
-              ...allErrors,
-              [currentError.path]: {
-                type: currentError.type ?? "validation",
-                message: currentError.message
-              }
-            }),
-            {}
-          )
-        };
-      }
-    },
-    [validationSchema]
-  );
-  
-const validationSchema = yup.object({
-  firstName: yup.string().required("Required"),
-  lastName: yup.string().required("Required")
-});
-
-export default function App() {
-  const resolver = useYupValidationResolver(validationSchema);
-  const { handleSubmit, register } = useForm({ resolver });
-
-  return (
-    <form onSubmit={handleSubmit(data => console.log(data))}>
-      <input {...register("firstName")} />
-      <input {...register("lastName")} />
-      <input type="submit" />
-    </form>
-  );
-}
-
-`
diff --git a/src/components/codeExamples/defaultExample.ts b/src/components/codeExamples/defaultExample.ts
deleted file mode 100644
index 1e1511306..000000000
--- a/src/components/codeExamples/defaultExample.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export default `import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register, handleSubmit, watch, formState: { errors } } = useForm();
-  const onSubmit = data => console.log(data);
-
-  console.log(watch("example")); // watch input value by passing the name of it
-
-  return (
-    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
-    <form onSubmit={handleSubmit(onSubmit)}>
-      {/* register your input into the hook by invoking the "register" function */}
-      <input defaultValue="test" {...register("example")} />
-      
-      {/* include validation with required or other standard HTML validation rules */}
-      <input {...register("exampleRequired", { required: true })} />
-      {/* errors will return when field validation fails  */}
-      {errors.exampleRequired && <span>This field is required</span>}
-      
-      <input type="submit" />
-    </form>
-  );
-}`
diff --git a/src/components/codeExamples/defaultExampleTs.tsx b/src/components/codeExamples/defaultExampleTs.tsx
deleted file mode 100644
index 42e7f2ed7..000000000
--- a/src/components/codeExamples/defaultExampleTs.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-export default `import { useForm, SubmitHandler } from "react-hook-form";
-
-type Inputs = {
-  example: string,
-  exampleRequired: string,
-};
-
-export default function App() {
-  const { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();
-  const onSubmit: SubmitHandler<Inputs> = data => console.log(data);
-
-  console.log(watch("example")) // watch input value by passing the name of it
-
-  return (
-    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
-    <form onSubmit={handleSubmit(onSubmit)}>
-      {/* register your input into the hook by invoking the "register" function */}
-      <input defaultValue="test" {...register("example")} />
-      
-      {/* include validation with required or other standard HTML validation rules */}
-      <input {...register("exampleRequired", { required: true })} />
-      {/* errors will return when field validation fails  */}
-      {errors.exampleRequired && <span>This field is required</span>}
-      
-      <input type="submit" />
-    </form>
-  );
-}`
diff --git a/src/components/codeExamples/defaultValues.ts b/src/components/codeExamples/defaultValues.ts
deleted file mode 100644
index 4b28aebda..000000000
--- a/src/components/codeExamples/defaultValues.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export default `const { register } = useForm({
-  defaultValues: {
-    firstName: "bill",
-    lastName: "luo",
-  }
-})
-
-<input {...register("firstName")} /> // ✅ working version
-<Controller name="lastName" render={({ field }) => <input {...field} />} />  // ✅ working version
-`
diff --git a/src/components/codeExamples/defaultValuesTs.ts b/src/components/codeExamples/defaultValuesTs.ts
deleted file mode 100644
index 1451fcb83..000000000
--- a/src/components/codeExamples/defaultValuesTs.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export default `type Inputs = {
-  firstName: string;
-  lastName: string;
-  email: string;
-  isDeveloper: boolean;
-}
-  
-const { register } = useForm<Inputs>({
-  defaultValues: {
-    firstName: "bill",
-    lastName: "luo",
-    email: "bluebill1049@hotmail.com",
-    isDeveloper: true
-  }
-})
-
-<input {...register("firstName")} /> // ✅ working version
-`
diff --git a/src/components/codeExamples/enzymeInput.tsx b/src/components/codeExamples/enzymeInput.tsx
deleted file mode 100644
index 65b0bffa1..000000000
--- a/src/components/codeExamples/enzymeInput.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default `const element = wrapper.find("select[data-testid='a']");
-element.getDOMNode().value = "foo";
-element.getDOMNode().dispatchEvent(new Event("input"));`
diff --git a/src/components/codeExamples/errorCode.ts b/src/components/codeExamples/errorCode.ts
deleted file mode 100644
index 53e462129..000000000
--- a/src/components/codeExamples/errorCode.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export default `import React from "react";
-import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register, formState: { errors }, handleSubmit } = useForm();
-  const onSubmit = data => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register("singleErrorInput", { required: true })} />
-      {errors.singleErrorInput && "Your input is required"}
-
-      {/* refer to the type of error to display message accordingly */}
-      <input {...register("multipleErrorInput", { required: true, maxLength: 50 })} />
-      {errors.multipleErrorInput?.type === "required" && "Your input is required"}
-      {errors.multipleErrorInput?.type === "maxLength" && "Your input exceed maxLength"}
-
-      {/* register with validation */}
-      <input type="number" {...register("numberInput", { min: 50 })} />
-      {errors.numberInput && "Your input required to be more than 50"}
-
-      {/* register with validation and error message */}
-      <input {...register("errorMessage", { required: "This is required" })} />
-      {errors.errorMessage?.message}
-
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/errorCodeTs.tsx b/src/components/codeExamples/errorCodeTs.tsx
deleted file mode 100644
index aef4d2254..000000000
--- a/src/components/codeExamples/errorCodeTs.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-export default `import * as React from 'react'
-import { useForm } from "react-hook-form";
-
-interface IFormInputs {
-  singleErrorInput: string
-  multipleErrorInput: string
-  numberInput: string
-}
-
-function App() {
-  const { register, formState: { errors }, handleSubmit } = useForm<IFormInputs>();
-
-  const onSubmit = (data: IFormInputs) => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <label>Error</label>
-      <input {...register("singleErrorInput", { required: true })} />
-      {errors.singleErrorInput && <p>Your input is required</p>}
-
-      <label>Error with type check</label>
-      <input {...register("multipleErrorInput", { required: true, minLength: 5 })} />
-      {errors.multipleErrorInput?.type === "required" && (
-        <p>Your input is required</p>
-      )}
-      {errors.multipleErrorInput?.type === "minLength" && (
-        <p>Your input must be larger then 3 characters</p>
-      )}
-
-      <label>Error with value</label>
-      <input type="number" {...register("numberInput", { min: 50 })} />
-      {errors.numberInput && <p>Your input required to be more than 50</p>}
-
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/errorMessageAdvance.ts b/src/components/codeExamples/errorMessageAdvance.ts
deleted file mode 100644
index f0d60442d..000000000
--- a/src/components/codeExamples/errorMessageAdvance.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export default `import React from "react";
-import { useForm, useFormContext } from "react-hook-form";
-
-const ErrorMessage = ({ errors, name, messages }) => {
-  // Note: if you are using FormContext, then you can use Errors without props eg:
-  // const { formState: { errors } } = useFormContext();
-  if (!errors[name]) return null;
-
-  return <p>{messages[errors[name]].message}</p>;
-};
-
-const messages = {
-  test: {
-    min: "This field required minLength of 8"
-  }
-};
-
-export default () => {
-  const { register, formState: { errors } } = useForm();
-
-  return (
-    <form>
-      <input {...register("test", { required: "This is required." })} />
-      <ErrorMessage errors={errors} name="test" />
-    </form>
-  );
-};
-`
diff --git a/src/components/codeExamples/fieldArray.tsx b/src/components/codeExamples/fieldArray.tsx
deleted file mode 100644
index 7788a8a4b..000000000
--- a/src/components/codeExamples/fieldArray.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-export default `import React, { useState } from "react";
-import { useForm } from "react-hook-form";
-
-function createArrayWithNumbers(length) {
-  return Array.from({ length }, (_, k) => k + 1);
-}
-
-export default function App() {
-  const { register, handleSubmit } = useForm();
-  const [size, setSize] = useState(1);
-  const onSubmit = data => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      {createArrayWithNumbers(size).map(index => {
-        return (
-          <>
-            <label htmlFor="firstName">First Name</label>
-            <input
-              name={\`firstName[\${index}]\`}
-              placeholder="first name"
-              ref={register({ required: true })}
-            />
-            
-            <label htmlFor="lastName">Last Name</label>
-            <input
-              name={\`lastName[\${index}]\`}
-              placeholder="last name"
-              ref={register({ required: true })}
-            />
-          </>
-        );
-      })}
-
-      <button type="button" onClick={() => setSize(size + 1)} >
-        Add Person
-      </button>
-      
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/fieldArrayReset.ts b/src/components/codeExamples/fieldArrayReset.ts
deleted file mode 100644
index 1613107c9..000000000
--- a/src/components/codeExamples/fieldArrayReset.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-export default `import React, { useEffect } from "react";
-import { useForm, useFieldArray, Controller } from "react-hook-form";
-
-function App() {
-  const { register, control, handleSubmit, reset } = useForm({
-    defaultValues: {
-      loadState: "unloaded",
-      names: [{ firstName: "Bill", lastName: "Luo" }]
-    }
-  });
-  const { fields, remove } = useFieldArray({
-    control,
-    name: "names"
-  });
-
-  useEffect(() => {
-    reset({
-      names: [
-        {
-          firstName: "Bob",
-          lastName: "Actually"
-        },
-        {
-          firstName: "Jane",
-          lastName: "Actually"
-        }
-      ]
-    });
-  }, [reset]);
-
-  const onSubmit = (data) => console.log("data", data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <ul>
-        {fields.map((item, index) => (
-          <li key={item.id}>
-            <input {...register(\`names.\${index}.firstName\`)} />
-
-            <Controller
-              render={({ field }) => <input {...field} />}
-              name={\`names.\${index}.lastName\`}
-              control={control}
-            />
-            <button type="button" onClick={() => remove(index)}>Delete</button>
-          </li>
-        ))}
-      </ul>
-
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/focusController.tsx b/src/components/codeExamples/focusController.tsx
deleted file mode 100644
index 271d72d7f..000000000
--- a/src/components/codeExamples/focusController.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-export default `import React, { useEffect, useRef } from "react"
-import { useForm } from "react-hook-form"
-
-export default function App() {
-  const inputRef = useRef();
-  const { control, handleSubmit, formState } = useForm({});
-
-  useEffect(() => {
-    if (formState.errors.test) {
-      inputRef.current.focus();
-    }
-  }, [formState]);
-
-  return (
-    <form onSubmit={handleSubmit(data => console.log(data))}>
-      <Controller as={<ExternalInput ref={inputRef} />} name="test" control={control} rules={{ required: true }} />
-      <button>Submit</button>
-    </form>
-  );
-}`
diff --git a/src/components/codeExamples/form.ts b/src/components/codeExamples/form.ts
deleted file mode 100644
index d803c3f85..000000000
--- a/src/components/codeExamples/form.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export default `import React from "react";
-import { useForm } from "react-hook-form";
-
-export default function Form({ defaultValues, children, onSubmit }) {
-  const methods = useForm({ defaultValues });
-  const { handleSubmit } = methods;
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      {React.Children.map(children, child => {
-        return child.props.name
-          ? React.createElement(child.type, {
-              ...{
-                ...child.props,
-                register: methods.register,
-                key: child.props.name
-              }
-            })
-          : child;
-       })}
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/formContextPerformance.ts b/src/components/codeExamples/formContextPerformance.ts
deleted file mode 100644
index 20fa31c06..000000000
--- a/src/components/codeExamples/formContextPerformance.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-export default `import React, { memo } from "react";
-import { useForm, FormProvider, useFormContext } from "react-hook-form";
-
-// we can use React.memo to prevent re-render except isDirty state changed
-const NestedInput = memo(
-  ({ register, formState: { isDirty } }) => (
-    <div>
-      <input {...register("test")} />
-      {isDirty && <p>This field is dirty</p>}
-    </div>
-  ),
-  (prevProps, nextProps) =>
-    prevProps.formState.isDirty === nextProps.formState.isDirty
-);
-
-export const NestedInputContainer = ({ children }) => {
-  const methods = useFormContext();
-
-  return <NestedInput {...methods} />;
-};
-
-export default function App() {
-  const methods = useForm();
-  const onSubmit = data => console.log(data);
-  console.log(methods.formState.isDirty); // make sure formState is read before render to enable the Proxy
-
-  return (
-    <FormProvider {...methods}>
-      <form onSubmit={methods.handleSubmit(onSubmit)}>
-        <NestedInputContainer />
-        <input type="submit" />
-      </form>
-    </FormProvider>
-  );
-}
-`
diff --git a/src/components/codeExamples/formWizard.ts b/src/components/codeExamples/formWizard.ts
deleted file mode 100644
index a59f484d4..000000000
--- a/src/components/codeExamples/formWizard.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-export const step1 = `import { BrowserRouter as Router, Route } from "react-router-dom";
-import { StateMachineProvider, createStore } from "little-state-machine";
-import Step1 from "./Step1";
-import Step2 from "./Step2";
-import Result from "./Result";
-
-createStore({
-  data: {
-    firstName: '',
-    lastName: '',
-  }
-});
-
-export default function App() {
-  return (
-    <StateMachineProvider>
-      <Router>
-        <Route exact path="/" component={Step1} />
-        <Route path="/step2" component={Step2} />
-        <Route path="/result" component={Result} />
-      </Router>
-    </StateMachineProvider>
-  );
-}
-`
-
-export const step2 = `import { useForm } from "react-hook-form";
-import { withRouter } from "react-router-dom";
-import { useStateMachine } from "little-state-machine";
-import updateAction from "./updateAction";
-
-const Step1 = props => {
-  const { register, handleSubmit } = useForm();
-  const { actions } = useStateMachine({ updateAction });
-  const onSubmit = data => {
-    actions.updateAction(data);
-    props.history.push("./step2");
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register("firstName")} />
-      <input {...register("lastName")} />
-      <input type="submit" />
-    </form>
-  );
-};
-
-export default withRouter(Step1);
-`
-
-export const step3 = `import { useStateMachine } from "little-state-machine";
-import updateAction from "./updateAction";
-
-const Result = props => {
-  const { state } = useStateMachine(updateAction);
-
-  return <pre>{JSON.stringify(state, null, 2)}</pre>;
-};`
diff --git a/src/components/codeExamples/getStarted.ts b/src/components/codeExamples/getStarted.ts
deleted file mode 100644
index c06a6d5db..000000000
--- a/src/components/codeExamples/getStarted.ts
+++ /dev/null
@@ -1,396 +0,0 @@
-export const registerCode = `import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register, handleSubmit } = useForm();
-  const onSubmit = data => console.log(data);
-   
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register("firstName")} />
-      <select {...register("gender")}>
-        <option value="female">female</option>
-        <option value="male">male</option>
-        <option value="other">other</option>
-      </select>
-      <input type="submit" />
-    </form>
-  );
-}`
-
-export const registerCodeTs = `import ReactDOM from "react-dom";
-import { useForm, SubmitHandler } from "react-hook-form";
-
-enum GenderEnum {
-  female = "female",
-  male = "male",
-  other = "other"
-}
-
-interface IFormInput {
-  firstName: String;
-  gender: GenderEnum;
-}
-
-export default function App() {
-  const { register, handleSubmit } = useForm<IFormInput>();
-  const onSubmit: SubmitHandler<IFormInput> = data => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <label>First Name</label>
-      <input {...register("firstName")} />
-      <label>Gender Selection</label>
-      <select {...register("gender")} >
-        <option value="female">female</option>
-        <option value="male">male</option>
-        <option value="other">other</option>
-      </select>
-      <input type="submit" />
-    </form>
-  );
-}
-`
-
-export const migrateCode = `import { useForm } from "react-hook-form";
-
-// The following component is an example of your existing Input Component
-const Input = ({ label, register, required }) => (
-  <>
-    <label>{label}</label>
-    <input {...register(label, { required })} />
-  </>
-);
-
-// you can use React.forwardRef to pass the ref too
-const Select = React.forwardRef(({ onChange, onBlur, name, label }, ref) => (
-  <>
-    <label>{label}</label>
-    <select name={name} ref={ref} onChange={onChange} onBlur={onBlur}>
-      <option value="20">20</option>
-      <option value="30">30</option>
-    </select>
-  </>
-));
-
-const App = () => {
-  const { register, handleSubmit } = useForm();
-
-  const onSubmit = (data) => {
-    alert(JSON.stringify(data));
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Input label="First Name" register={register} required />
-      <Select label="Age" {...register("Age")} />
-      <input type="submit" />
-    </form>
-  );
-};
-`
-
-export const migrateCodeTs = `import { Path, useForm, UseFormRegister, SubmitHandler } from "react-hook-form";
-
-interface IFormValues {
-  "First Name": string;
-  Age: number;
-}
-
-type InputProps = {
-  label: Path<IFormValues>;
-  register: UseFormRegister<IFormValues>;
-  required: boolean;
-};
-
-// The following component is an example of your existing Input Component
-const Input = ({ label, register, required }: InputProps) => (
-  <>
-    <label>{label}</label>
-    <input {...register(label, { required })} />
-  </>
-);
-
-// you can use React.forwardRef to pass the ref too
-const Select = React.forwardRef<
-  HTMLSelectElement,
-  { label: string } & ReturnType<UseFormRegister<IFormValues>>
->(({ onChange, onBlur, name, label }, ref) => (
-  <>
-    <label>{label}</label>
-    <select name={name} ref={ref} onChange={onChange} onBlur={onBlur}>
-      <option value="20">20</option>
-      <option value="30">30</option>
-    </select>
-  </>
-));
-
-const App = () => {
-  const { register, handleSubmit } = useForm<IFormValues>();
-
-  const onSubmit: SubmitHandler<IFormValues> = data => {
-    alert(JSON.stringify(data));
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Input label="First Name" register={register} required />
-      <Select label="Age" {...register("Age")} />
-      <input type="submit" />
-    </form>
-  );
-};
-`
-export const uiLibraryHookInput = `import Select from "react-select";
-import { useForm, Controller } from "react-hook-form";
-import Input from "@material-ui/core/Input";
-
-const App = () => {
-  const { control, handleSubmit } = useForm({
-    defaultValues: {
-      firstName: '',
-      select: {}
-    }
-  });
-  const onSubmit = data => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Controller
-        name="firstName"
-        control={control}
-        render={({ field }) => <Input {...field} />}
-      />
-      <Controller
-        name="select"
-        control={control}
-        render={({ field }) => <Select 
-          {...field} 
-          options={[
-            { value: "chocolate", label: "Chocolate" },
-            { value: "strawberry", label: "Strawberry" },
-            { value: "vanilla", label: "Vanilla" }
-          ]} 
-        />}
-      />
-      <input type="submit" />
-    </form>
-  );
-};
-`
-
-export const uiLibraryHookInputTs = `import Select from "react-select";
-import { useForm, Controller, SubmitHandler } from "react-hook-form";
-import Input from "@material-ui/core/Input";
-
-interface IFormInput {
-  firstName: string;
-  lastName: string;
-  iceCreamType: { label: string; value: string };
-}
-
-const App = () => {
-  const { control, handleSubmit } = useForm({
-    defaultValues: {
-      firstName: '',
-      lastName: '',
-      iceCreamType: {}
-    }
-  });
-
-  const onSubmit: SubmitHandler<IFormInput> = data => {
-    console.log(data)
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Controller
-        name="firstName"
-        control={control}
-        render={({ field }) => <Input {...field} />}
-      />
-      <Controller
-        name="iceCreamType"
-        control={control}
-        render={({ field }) => <Select 
-          {...field} 
-          options={[
-            { value: "chocolate", label: "Chocolate" },
-            { value: "strawberry", label: "Strawberry" },
-            { value: "vanilla", label: "Vanilla" }
-          ]} 
-        />}
-      />
-      <input type="submit" />
-    </form>
-  );
-};`
-
-export const controlledComponent = `import { useForm, Controller } from "react-hook-form";
-import { TextField, Checkbox } from "@material-ui/core";
-
-function App() {
-  const { handleSubmit, control, reset } = useForm({
-    defaultValues: {
-      checkbox: false,
-    }
-  });
-  const onSubmit = data => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Controller
-        name="checkbox"
-        control={control}
-        rules={{ required: true }}
-        render={({ field }) => <Checkbox {...field} />}
-      />
-      <input type="submit" />
-    </form>
-  );
-}
-`
-
-export const controlledComponentTs = `import { useForm, Controller, SubmitHandler } from "react-hook-form";
-import { TextField, Checkbox } from "@material-ui/core";
-
-interface IFormInputs {
-  TextField: string
-  MyCheckbox: boolean
-}
-
-function App() {
-  const { handleSubmit, control, reset } = useForm<IFormInputs>({
-    defaultValues: {
-      MyCheckbox: false
-    }
-  });
-  const onSubmit: SubmitHandler<IFormInputs> = data => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Controller
-        name="MyCheckbox"
-        control={control}
-        rules={{ required: true }}
-        render={({ field }) => <Checkbox {...field} />}
-      />
-      <input type="submit" />
-    </form>
-  );
-}
-`
-
-export const globalState = `import { useForm } from "react-hook-form";
-import { connect } from "react-redux";
-import updateAction from "./actions";
-
-export default function App(props) {
-  const { register, handleSubmit, setValue } = useForm({
-    defaultValues: {
-      firstName: '',
-      lastName: '',
-    }
-  });
-  // Submit your data into Redux store
-  const onSubmit = data => props.updateAction(data);
-  
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register("firstName")} />
-      <input {...register("lastName")} />
-      <input type="submit" />
-    </form>
-  );
-}
-
-// Connect your component with redux
-connect(({ firstName, lastName }) => ({ firstName, lastName }), updateAction)(YourForm);
-`
-
-export const errors = `import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register, formState: { errors }, handleSubmit } = useForm();
-  const onSubmit = (data) => console.log(data);
-  
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input 
-        {...register("firstName", { required: true })} 
-        aria-invalid={errors.firstName ? "true" : "false"} 
-      />
-      {errors.firstName?.type === 'required' && <p role="alert">First name is required</p>}
-
-      <input 
-        {...register("mail", { required: "Email Address is required" })} 
-        aria-invalid={errors.mail ? "true" : "false"} 
-      />
-      {errors.mail && <p role="alert">{errors.mail?.message}</p>}
-      
-      <input type="submit" />
-    </form>
-  );
-}
-`
-
-export const errorsTs = `import { useForm, SubmitHandler } from "react-hook-form";
-
-interface IFormInputs {
-  firstName: string
-  lastName: string
-}
-
-const onSubmit: SubmitHandler<IFormInputs> = data => console.log(data);
-
-export default function App() {
-  const { register, formState: { errors }, handleSubmit } = useForm<IFormInputs>();
-  
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register("firstName", { required: true })} />
-      {errors.firstName && "First name is required"}
-      <input {...register("lastName", { required: true })} />
-      {errors.lastName && "Last name is required"}
-      <input type="submit" />
-    </form>
-  );
-}
-`
-
-export const applyValidation = `import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register, handleSubmit } = useForm();
-  const onSubmit = data => console.log(data);
-   
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register("firstName", { required: true, maxLength: 20 })} />
-      <input {...register("lastName", { pattern: /^[A-Za-z]+$/i })} />
-      <input type="number" {...register("age", { min: 18, max: 99 })} />
-      <input type="submit" />
-    </form>
-  );
-}`
-
-export const applyValidationTs = `import { useForm, SubmitHandler } from "react-hook-form";
-
-interface IFormInput {
-  firstName: string;
-  lastName: string;
-  age: number;
-}
-
-export default function App() {
-  const { register, handleSubmit } = useForm<IFormInput>();
-  const onSubmit: SubmitHandler<IFormInput> = data => console.log(data);
-   
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register("firstName", { required: true, maxLength: 20 })} />
-      <input {...register("lastName", { pattern: /^[A-Za-z]+$/i })} />
-      <input type="number" {...register("age", { min: 18, max: 99 })} />
-      <input type="submit" />
-    </form>
-  );
-}`
diff --git a/src/components/codeExamples/handleSubmitAsyncCode.ts b/src/components/codeExamples/handleSubmitAsyncCode.ts
deleted file mode 100644
index 8c91be784..000000000
--- a/src/components/codeExamples/handleSubmitAsyncCode.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export default `import React from "react";
-import { useForm } from "react-hook-form";
-
-const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
-
-function App() {
-  const { register, handleSubmit, formState: { errors }, formState } = useForm();
-  const onSubmit = async data => {
-    await sleep(2000);
-    if (data.username === "bill") {
-      alert(JSON.stringify(data));
-    } else {
-      alert("There is an error");
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <label htmlFor="username">User Name</label>
-      <input placeholder="Bill" {...register("username"} />
-
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/handleSubmitCode.ts b/src/components/codeExamples/handleSubmitCode.ts
deleted file mode 100644
index a4790fa57..000000000
--- a/src/components/codeExamples/handleSubmitCode.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export default `import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register, handleSubmit } = useForm();
-  const onSubmit = (data, e) => console.log(data, e);
-  const onError = (errors, e) => console.log(errors, e);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit, onError)}>
-      <input {...register("firstName")} />
-      <input {...register("lastName")} />
-      <button type="submit">Submit</button>
-    </form>
-  );
-}`
diff --git a/src/components/codeExamples/handleSubmitCodeTs.ts b/src/components/codeExamples/handleSubmitCodeTs.ts
deleted file mode 100644
index 511ef0d2e..000000000
--- a/src/components/codeExamples/handleSubmitCodeTs.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export default `import React from "react";
-import { useForm, SubmitHandler } from "react-hook-form";
-
-type FormValues = {
-  firstName: string;
-  lastName: string;
-  email: string;
-};
-
-export default function App() {
-  const { register, handleSubmit } = useForm<FormValues>();
-  const onSubmit: SubmitHandler<FormValues> = data => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register("firstName")} />
-      <input {...register("lastName")} />
-      <input type="email" {...register("email")} />
-
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/importKeystroke.ts b/src/components/codeExamples/importKeystroke.ts
deleted file mode 100644
index 18f2bede4..000000000
--- a/src/components/codeExamples/importKeystroke.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export default `import { useForm } from 'react-hook-form/dist/index.ie11'; // V6
-import { useForm } from 'react-hook-form/dist/react-hook-form.ie11'; // V5'
-// Resolvers
-import { yupResolver } from '@hookform/resolvers/dist/ie11/yup';`
diff --git a/src/components/codeExamples/initialValue.ts b/src/components/codeExamples/initialValue.ts
deleted file mode 100644
index ed94e587d..000000000
--- a/src/components/codeExamples/initialValue.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export default `function App() {
-  const { register, handleSubmit } = useForm({
-    defaultValues: {
-      firstName: "bill",
-      lastName: "luo",
-    }
-  });
-
-  return (
-    <form onSubmit={handleSubmit(data => console.log(data))}>
-      <input {...register("firstName")} />
-      <input {...register("lastName")} />
-      <button type="submit">Submit</button>
-    </form>
-  );
-}`
diff --git a/src/components/codeExamples/input.ts b/src/components/codeExamples/input.ts
deleted file mode 100644
index 5e3e48cd6..000000000
--- a/src/components/codeExamples/input.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export default `import React from "react";
-
-export function Input({ register, name, ...rest }) {
-  return <input {...register(name)} {...rest} />;
-}
-
-export function Select({ register, options, name, ...rest }) {
-  return (
-    <select {...register(name)} {...rest}>
-      {options.map(value => (
-        <option key={value} value={value}>
-          {value}
-        </option>
-      ))}
-    </select>
-  );
-}
-`
diff --git a/src/components/codeExamples/joiResolver.tsx b/src/components/codeExamples/joiResolver.tsx
deleted file mode 100644
index c6bf7a641..000000000
--- a/src/components/codeExamples/joiResolver.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-export default `import React from 'react';
-import { useForm } from 'react-hook-form';
-import { joiResolver } from '@hookform/resolvers/joi';
-import Joi from "joi";
-
-const schema = Joi.object({
-  name: Joi.string().required(),
-  age: Joi.string().required(),
-});
-
-const App = () => {
-  const { register, handleSubmit } = useForm({
-    resolver: joiResolver(schema),
-  });
-
-  return (
-    <form onSubmit={handleSubmit(d => console.log(d))}>
-      <input {...register("name")} />
-      <input type="number" {...register("age")} />
-      <input type="submit" />
-    </form>
-  );
-};
-`
diff --git a/src/components/codeExamples/joiResolverTs.ts b/src/components/codeExamples/joiResolverTs.ts
deleted file mode 100644
index d47fb9f3b..000000000
--- a/src/components/codeExamples/joiResolverTs.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-export default `import React from "react";
-import { useForm } from "react-hook-form";
-import { joiResolver } from "@hookform/resolvers/joi";
-import Joi from "joi";
-
-interface IFormInput {
-  name: string;
-  age: number;
-}
-
-const schema = Joi.object({
-  name: Joi.string().required(),
-  age: Joi.number().required()
-});
-
-const App = () => {
-  const { register, handleSubmit, formState: { errors } } = useForm<IFormInput>({
-    resolver: joiResolver(schema)
-  });
-  const onSubmit = (data: IFormInput) => {
-    console.log(data);
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register("name"} />
-      <input type="number" {...register("age"} />
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/manualValidation.ts b/src/components/codeExamples/manualValidation.ts
deleted file mode 100644
index 874eed749..000000000
--- a/src/components/codeExamples/manualValidation.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export default `import React, { useEffect } from "react";
-import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register, handleSubmit, setValue, setError } = useForm();
-  const onSubmit = data => console.log(data);
-
-  useEffect(() => {
-    register("firstName", { required: true });
-    register("lastName");
-  }, []);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input
-        name="firstName"
-        onChange={e => setValue("firstName", e.target.value)}
-      />
-      <input
-        name="lastName"
-        onChange={e => {
-          const value = e.target.value;
-          if (value === "test") {
-            setError("lastName", "notMatch")
-          } else {
-            setValue("lastName", e.target.value)
-          }
-        }}
-      />
-      <button>Submit</button>
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/multipleErrorCode.ts b/src/components/codeExamples/multipleErrorCode.ts
deleted file mode 100644
index 08f650bd3..000000000
--- a/src/components/codeExamples/multipleErrorCode.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export default `import React from "react";
-import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register, formState: { errors }, handleSubmit } = useForm({
-    // by setting criteriaMode to 'all', 
-    // all validation errors for single field will display at once
-    criteriaMode: "all"
-  });
-  const onSubmit = data => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input
-        type="password"
-        {...register("password", { required: true, minLength: 10, pattern: /\\d+/ })}
-      />
-      {/* without enter data for the password input will result both messages to appear */}
-      {errors?.password?.types?.required && <p>password required</p>}
-      {errors?.password?.types?.minLength && <p>password minLength 10</p>}
-      {errors?.password?.types?.pattern && <p>password number only</p>}
-
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/multipleErrorCodeTs.ts b/src/components/codeExamples/multipleErrorCodeTs.ts
deleted file mode 100644
index 3888c92d2..000000000
--- a/src/components/codeExamples/multipleErrorCodeTs.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-export default `import { useForm } from "react-hook-form";
-
-interface IFormInputs {
-  password: string
-}
-
-export default function App() {
-  const { register, formState: { errors }, handleSubmit } = useForm<IFormInputs>({
-    // by setting criteriaMode to 'all',
-    // all validation errors for single field will display at once
-    criteriaMode: "all",
-    mode: "onChange"
-  });
-
-  const onSubmit = (data: IFormInputs) => {
-    console.log(data)
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <label>Password</label>
-      <input
-        type="password"
-        {...register("password", { required: true, minLength: 10, pattern: /\d+/gi })}
-      />
-      {/* without enter data for the password input will result both messages to appear */}
-      {errors?.password?.types?.required && <p>password required</p>}
-      {errors?.password?.types?.minLength && <p>password minLength 10</p>}
-      {errors?.password?.types?.pattern && <p>password number only</p>}
-
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/nativeValidation.ts b/src/components/codeExamples/nativeValidation.ts
deleted file mode 100644
index 3083fb057..000000000
--- a/src/components/codeExamples/nativeValidation.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export default `import React from "react";
-import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register, handleSubmit } = useForm({ nativeValidation: true });
-  const onSubmit = async data => { console.log(data); };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input
-        {...register("firstName", { required: "Please enter your first name." })} // custom message
-      />
-      <input {...register("lastName", { required: true })} />
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/reactNative.ts b/src/components/codeExamples/reactNative.ts
deleted file mode 100644
index d1073e4b5..000000000
--- a/src/components/codeExamples/reactNative.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export default `import React from "react";
-import { Text, View, TextInput, Button, Alert } from "react-native";
-import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register, setValue, handleSubmit, formState: { errors } } = useForm();
-  const onSubmit = data => Alert.alert("Form Data", JSON.stringify(data));
-  
-  useEffect(() => {
-    register("firstName", { required: true });
-    register("lastName");
-  }, [register]);
-
-  return (
-    <View>
-      <Text>First name</Text>
-      <TextInput
-        onChangeText={text => setValue("firstName", text, true)}
-      />
-      {errors.firstName && <Text>This is required.</Text>}
-
-      <Text>Last name</Text>
-      <TextInput
-        onChangeText={text => setValue("lastName", text)}
-      />
-
-      <Button onPress={handleSubmit(onSubmit)} />
-    </View>
-  );
-}
-`
diff --git a/src/components/codeExamples/reactNativeController.ts b/src/components/codeExamples/reactNativeController.ts
deleted file mode 100644
index 53b11e0e3..000000000
--- a/src/components/codeExamples/reactNativeController.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-export default `import { Text, View, TextInput, Button, Alert } from "react-native";
-import { useForm, Controller } from "react-hook-form";
-
-export default function App() {
-  const { control, handleSubmit, formState: { errors } } = useForm({
-    defaultValues: {
-      firstName: '',
-      lastName: ''
-    }
-  });
-  const onSubmit = data => console.log(data);
-
-  return (
-    <View>
-      <Controller
-        control={control}
-        rules={{
-         required: true,
-        }}
-        render={({ field: { onChange, onBlur, value } }) => (
-          <TextInput
-            placeholder="First name"
-            onBlur={onBlur}
-            onChangeText={onChange}
-            value={value}
-          />
-        )}
-        name="firstName"
-      />
-      {errors.firstName && <Text>This is required.</Text>}
-
-      <Controller
-        control={control}
-        rules={{
-         maxLength: 100,
-        }}
-        render={({ field: { onChange, onBlur, value } }) => (
-          <TextInput
-            placeholder="Last name"
-            onBlur={onBlur}
-            onChangeText={onChange}
-            value={value}
-          />
-        )}
-        name="lastName"
-      />
-
-      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
-    </View>
-  );
-}
-`
diff --git a/src/components/codeExamples/resetCode.ts b/src/components/codeExamples/resetCode.ts
deleted file mode 100644
index 7504be6ca..000000000
--- a/src/components/codeExamples/resetCode.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-export default `import React, { useCallback } from "react";
-import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register, handleSubmit, reset } = useForm();
-  const resetAsyncForm = useCallback(async () => {
-    const result = await fetch('./api/formValues.json'); // result: { firstName: 'test', lastName: 'test2' }
-    reset(result); // asynchronously reset your form values
-  }, [reset]);
-  
-  useEffect(() => {
-    resetAsyncForm()
-  }, [resetAsyncForm])
-
-  return (
-    <form onSubmit={handleSubmit((data) => {})}>
-      <input {...register("firstName")} />
-      <input {...register("lastName")} />
-      
-      <input type="button" onClick={() => {
-        reset({
-          firstName: "bill"
-        }, {
-          keepErrors: true, 
-          keepDirty: true,
-        });
-      }} />
-      
-      <button 
-        onClick={() => {
-          reset(formValues => ({
-            ...formValues,
-            lastName: 'test',
-          }))
-        }}
-      >
-        Reset partial
-      </button>
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/resetCodeControlled.ts b/src/components/codeExamples/resetCodeControlled.ts
deleted file mode 100644
index 1a2f03308..000000000
--- a/src/components/codeExamples/resetCodeControlled.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-export default `import React, { useEffect } from "react";
-import { useForm } from "react-hook-form";
-
-const defaultValues = {
-  firstName: "bill",
-  lastName: "luo"
-};
-
-export default function App() {
-  const { register, reset, watch, setValue } = useForm({
-    defaultValues
-  });
-  const values = watch();
-
-  useEffect(() => {
-    register("firstName", { required: true });
-    register("lastName");
-  }, [register]);
-
-  return (
-    <form>
-      <input
-        name="firstName"
-        onChange={e => setValue("firstName", e.target.value)}
-        value={values.firstName}
-        placeholder="First Name"
-      />
-      <input
-        name="lastName"
-        onChange={e => setValue("lastName", e.target.value)}
-        value={values.lastName}
-        placeholder="Last Name"
-      />
-      <button
-        type="button"
-        onClick={() => {
-          reset(defaultValues);
-        }}
-      >
-        Reset
-      </button>
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/resetCodeTs.ts b/src/components/codeExamples/resetCodeTs.ts
deleted file mode 100644
index 41036424f..000000000
--- a/src/components/codeExamples/resetCodeTs.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-export default `import { useForm } from "react-hook-form";
-
-interface UseFormInputs {
-  firstName: string
-  lastName: string
-}
-
-export default function Form() {
-  const { register, handleSubmit, reset, formState: { errors } } = useForm<UseFormInputs>();
-  const onSubmit = (data: UseFormInputs) => {
-    console.log(data)
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <label>First name</label>
-      <input {...register("firstName", { required: true })} />
-
-      <label>Last name</label>
-      <input {...register("lastName")} />
-
-      <input type="submit" />
-      <input
-        type="reset"
-        value="Standard Reset Field Values"
-      />
-      <input
-        type="button"
-        onClick={() => reset()}
-        value="Custom Reset Field Values & Errors"
-      />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/resetController.ts b/src/components/codeExamples/resetController.ts
deleted file mode 100644
index bc4d89dde..000000000
--- a/src/components/codeExamples/resetController.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-export default `import { useForm, Controller } from "react-hook-form";
-import { TextField } from "@material-ui/core";
-
-export default function App() {
-  const { register, handleSubmit, reset, setValue, control } = useForm();
-  const onSubmit = data => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Controller
-        render={({ field }) => <TextField {...field} />}
-        name="firstName"
-        control={control}
-        rules={{ required: true }}
-        defaultValue=""
-      />
-      <Controller
-        render={({ field }) => <TextField {...field} />}
-        name="lastName"
-        control={control}
-        defaultValue=""
-      />
-
-      <input type="submit" />
-      <input type="button" onClick={reset} />
-      <input
-        type="button"
-        onClick={() => {
-          reset({
-            firstName: "bill",
-            lastName: "luo"
-          });
-        }}
-      />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/resetControllerTs.ts b/src/components/codeExamples/resetControllerTs.ts
deleted file mode 100644
index ac254ee40..000000000
--- a/src/components/codeExamples/resetControllerTs.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-export default `import React from "react";
-import { useForm, Controller } from "react-hook-form";
-import { TextField } from "@material-ui/core";
-
-interface IFormInputs {
-  firstName: string
-  lastName: string
-}
-
-export default function App() {
-  const { register, handleSubmit, reset, setValue, control } = useForm<IFormInputs>();
-  const onSubmit = (data: IFormInputs) => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Controller
-        render={({ field }) => <TextField {...field} />}
-        name="firstName"
-        control={control}
-        rules={{ required: true }}
-        defaultValue=""
-      />
-      <Controller
-        render={({ field }) => <TextField {...field} />}
-        name="lastName"
-        control={control}
-        defaultValue=""
-      />
-
-      <input type="submit" />
-      <input type="button" onClick={reset} />
-      <input
-        type="button"
-        onClick={() => {
-          reset({
-            firstName: "bill",
-            lastName: "luo"
-          });
-        }}
-      />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/resetFieldCode.ts b/src/components/codeExamples/resetFieldCode.ts
deleted file mode 100644
index fda0296a2..000000000
--- a/src/components/codeExamples/resetFieldCode.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export default `import * as React from "react";
-import { useForm } from "react-hook-form";
-
-export default function App() {
-  const {
-    register,
-    resetField,
-    formState: { isDirty, isValid }
-  } = useForm({
-    mode: "onChange",
-    defaultValues: {
-      firstName: ""
-    }
-  });
-  const handleClick = () => resetField("firstName");
-
-  return (
-    <form>
-      <input {...register("firstName", { required: true })} />
-
-      <p>{isDirty && "dirty"}</p>
-      <p>{isValid && "valid"}</p>
-
-      <button type="button" onClick={handleClick}>
-        Reset
-      </button>
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/resetFieldOptionCode.ts b/src/components/codeExamples/resetFieldOptionCode.ts
deleted file mode 100644
index 1ec325e78..000000000
--- a/src/components/codeExamples/resetFieldOptionCode.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-export default `import * as React from "react";
-import { useForm } from "react-hook-form";
-
-export default function App() {
-  const {
-    register,
-    resetField,
-    formState: { isDirty, isValid, errors, touchedFields, dirtyFields }
-  } = useForm({
-    mode: "onChange",
-    defaultValues: {
-      firstName: ""
-    }
-  });
-
-  return (
-    <form>
-      <input {...register("firstName", { required: true })} />
-
-      <p>isDirty: {isDirty && "dirty"}</p>
-      <p>touchedFields: {touchedFields.firstName && "touched field"}</p>
-      <p>dirtyFields:{dirtyFields.firstName && "dirty field"}</p>
-      <p>isValid: {isValid && "valid"}</p>
-      <p>error: {errors.firstName && "error"}</p>
-      
-      <hr />
-
-      <button
-        type="button"
-        onClick={() => resetField("firstName", { keepError: true })}
-      >
-        Reset keep error
-      </button>
-      <button
-        type="button"
-        onClick={() => resetField("firstName", { keepTouched: true })}
-      >
-        Reset keep touched fields
-      </button>
-      <button
-        type="button"
-        onClick={() => resetField("firstName", { keepDirty: true })}
-      >
-        Reset keep dirty fields
-      </button>
-      <button
-        type="button"
-        onClick={() => resetField("firstName", { defaultValue: "New" })}
-      >
-        update defaultValue
-      </button>
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/schemaValidation.ts b/src/components/codeExamples/schemaValidation.ts
deleted file mode 100644
index fad829a28..000000000
--- a/src/components/codeExamples/schemaValidation.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export default `import { useForm } from "react-hook-form";
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from "yup";
-
-const schema = yup.object({
-  firstName: yup.string().required(),
-  age: yup.number().positive().integer().required(),
-}).required();
-
-export default function App() {
-  const { register, handleSubmit, formState:{ errors } } = useForm({
-    resolver: yupResolver(schema)
-  });
-  const onSubmit = data => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register("firstName")} />
-      <p>{errors.firstName?.message}</p>
-        
-      <input {...register("age")} />
-      <p>{errors.age?.message}</p>
-      
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/schemaValidationTs.ts b/src/components/codeExamples/schemaValidationTs.ts
deleted file mode 100644
index afc07a534..000000000
--- a/src/components/codeExamples/schemaValidationTs.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export default `import { useForm } from "react-hook-form";
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from "yup";
-
-const schema = yup.object({
-  firstName: yup.string().required(),
-  age: yup.number().positive().integer().required(),
-}).required();
-type FormData = yup.InferType<typeof schema>;
-
-export default function App() {
-  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
-    resolver: yupResolver(schema)
-  });
-  const onSubmit = (data: FormData) => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register("firstName")} />
-      <p>{errors.firstName?.message}</p>
-        
-      <input {...register("age")} />
-      <p>{errors.age?.message}</p>
-      
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/setFocus.ts b/src/components/codeExamples/setFocus.ts
deleted file mode 100644
index 3f707644a..000000000
--- a/src/components/codeExamples/setFocus.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export default `import * as React from "react";
-import { useForm } from "./src";
-
-export default function App() {
-  const { register, handleSubmit, setFocus } = useForm();
-  const onSubmit = (data) => console.log(data);
-  renderCount++;
-
-  React.useEffect(() => {
-    setFocus("firstName");
-  }, [setFocus]);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register("firstName")} placeholder="First Name" />
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/setFocusTs.ts b/src/components/codeExamples/setFocusTs.ts
deleted file mode 100644
index 03451f370..000000000
--- a/src/components/codeExamples/setFocusTs.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export default `import * as React from "react";
-import { useForm } from "./src";
-
-type FormValues = {
-  firstName: string;
-};
-
-export default function App() {
-  const { register, handleSubmit, setFocus } = useForm<FormValues>();
-  const onSubmit = (data: FormValues) => console.log(data);
-  renderCount++;
-
-  React.useEffect(() => {
-    setFocus("firstName");
-  }, [setFocus]);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register("firstName")} placeholder="First Name" />
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/setValueUseFieldArray.ts b/src/components/codeExamples/setValueUseFieldArray.ts
deleted file mode 100644
index b40922426..000000000
--- a/src/components/codeExamples/setValueUseFieldArray.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-export default `import { useForm, useFieldArray } from "react-hook-form";
-
-const ChildComponent = ({ index, control, register }) => {
-  const { fields } = useFieldArray({
-    name: \`nest[$\{index\}].nestedArray\`,
-    control
-  });
-
-  return (
-    {fields.map((item, i) => (
-      <input
-        key={item.id}
-        {...register(\`nest[$\{index\}].nestedArray[$\{i\}].value\`)}
-        defaultValue={item.value}
-      />
-    ))}
-  );
-};
-
-export default () => {
-  const { register, control, setValue } = useForm({
-    defaultValues: {
-      nest: [
-        { value: "1", nestedArray: [{ value: "2" }] },
-        { value: "3", nestedArray: [{ value: "4" }] }
-      ]
-    }
-  });
-  const { fields } = useFieldArray({ name: "nest", control });
-
-  React.useEffect(() => {
-    setValue("nest", [
-      {
-        value: 0,
-        nestedArray: [
-          {
-            value: 8
-          }
-        ]
-      }
-    ]);
-  }, [setValue]);
-
-  return (
-    <>
-      {fields.map((item, i) => (
-        <div key={item.id}>
-          <input
-            {...register(\`nest[$\{i\}].value\`)}
-            defaultValue={item.value}
-          />
-          <ChildComponent control={control} register={register} index={i} />
-        </div>
-      ))}
-    </>
-  );
-};
-`
diff --git a/src/components/codeExamples/setup.native.ts b/src/components/codeExamples/setup.native.ts
deleted file mode 100644
index e0cf1d79f..000000000
--- a/src/components/codeExamples/setup.native.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export default `global.window = {}
-global.window = global`
diff --git a/src/components/codeExamples/shareRef.ts b/src/components/codeExamples/shareRef.ts
deleted file mode 100644
index 4408f9ad7..000000000
--- a/src/components/codeExamples/shareRef.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export default `import React, { useRef } from "react";
-import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register, handleSubmit } = useForm();
-  const firstNameRef = useRef(null);
-  const onSubmit = data => console.log(data);
-  const { ref, ...rest } = register('firstName');
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...rest} name="firstName" ref={(e) => {
-        ref(e)
-        firstNameRef.current = e // you can still assign to ref
-      }} />
-
-      <button>Submit</button>
-    </form>
-  );
-}`
diff --git a/src/components/codeExamples/shareRefTs.ts b/src/components/codeExamples/shareRefTs.ts
deleted file mode 100644
index 93495fab8..000000000
--- a/src/components/codeExamples/shareRefTs.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export default `import React, { useRef } from "react";
-import { useForm } from "react-hook-form";
-
-type Inputs = {
-  firstName: string,
-  lastName: string,
-};
-
-export default function App() {
-  const { register, handleSubmit } = useForm<Inputs>();
-  const firstNameRef = useRef<HTMLInputElement | null>(null);
-  const onSubmit = data => console.log(data);
-  const { ref, ...rest } = register('firstName');
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...rest} name="firstName" ref={(e) => {
-        ref(e)
-        firstNameRef.current = e // you can still assign to ref
-      }} />
-
-      <button>Submit</button>
-    </form>
-  );
-}`
diff --git a/src/components/codeExamples/shouldUseNativeValidation.ts b/src/components/codeExamples/shouldUseNativeValidation.ts
deleted file mode 100644
index d1c97b031..000000000
--- a/src/components/codeExamples/shouldUseNativeValidation.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export default `import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register, handleSubmit } = useForm({ shouldUseNativeValidation: true });
-  const onSubmit = async data => { console.log(data); };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input
-        {...register("firstName", { required: "Please enter your first name." })} // custom message
-      />
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/smartForm.ts b/src/components/codeExamples/smartForm.ts
deleted file mode 100644
index 49bfff42e..000000000
--- a/src/components/codeExamples/smartForm.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export default `import { Form, Input, Select } from "./Components";
-
-export default function App() {
-  const onSubmit = data => console.log(data);
-
-  return (
-    <Form onSubmit={onSubmit}>
-      <Input name="firstName" />
-      <Input name="lastName" />
-      <Select name="gender" options={["female", "male", "other"]} />
-
-      <Input type="submit" value="Submit" />
-    </Form>
-  );
-}
-`
diff --git a/src/components/codeExamples/strictlyTyped.ts b/src/components/codeExamples/strictlyTyped.ts
deleted file mode 100644
index cdc5a0031..000000000
--- a/src/components/codeExamples/strictlyTyped.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-export default `import { useTypedController } from '@hookform/strictly-typed';
-import { useForm } from 'react-hook-form';
-import { TextField, Checkbox } from '@material-ui/core';
-
-type FormValues = {
-  flat: string;
-  nested: {
-    object: { test: string };
-    array: { test: boolean }[];
-  };
-};
-
-export default function App() {
-  const { control, handleSubmit } = useForm<FormValues>();
-  const TypedController = useTypedController<FormValues>({ control });
-
-  const onSubmit = handleSubmit((data) => console.log(data));
-
-  return (
-    <form onSubmit={onSubmit}>
-      <TypedController
-        name="flat"
-        defaultValue=""
-        render={(props) => <TextField {...props} />}
-      />
-
-      <TypedController
-        as="textarea"
-        name={['nested', 'object', 'test']}
-        defaultValue=""
-        rules={{ required: true }}
-      />
-
-      <TypedController
-        name={['nested', 'array', 0, 'test']}
-        defaultValue={false}
-        render={({ onChange, value, ...rest }) => (
-          <Checkbox
-            {...rest}
-            onChange={e => onChange(e.target.checked)}
-            checked={value}
-          />
-        )}
-      />
-
-      {/* ❌: Type '"notExists"' is not assignable to type 'DeepPath<FormValues, "notExists">'. */}
-      <TypedController as="input" name="notExists" defaultValue="" />
-
-      {/* ❌: Type 'number' is not assignable to type 'string | undefined'. */}
-      <TypedController
-        as="input"
-        name={['nested', 'object', 0, 'notExists']}
-        defaultValue=""
-      />
-
-      {/* ❌: Type 'true' is not assignable to type 'string | undefined'. */}
-      <TypedController as="input" name="flat" defaultValue={true} />
-
-      <input type="submit" />
-    </form>
-  );
-}`
diff --git a/src/components/codeExamples/submitReset.ts b/src/components/codeExamples/submitReset.ts
deleted file mode 100644
index 0bc57b9f6..000000000
--- a/src/components/codeExamples/submitReset.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export default `import { useForm, useFieldArray, Controller } from "./src";
-
-function App() {
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState,
-    formState: { isSubmitSuccessful }
-  } = useForm({ defaultValues: { something: "anything" } });
-
-  const onSubmit = (data) => {
-    // It's recommended to reset in useEffect as execution order matters
-    // reset({ ...data })
-  };
-
-  React.useEffect(() => {
-    if (formState.isSubmitSuccessful) {
-      reset({ something: '' });
-    }
-  }, [formState, submittedData, reset]);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register("something")} />
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/testingForm.ts b/src/components/codeExamples/testingForm.ts
deleted file mode 100644
index 256edb3a5..000000000
--- a/src/components/codeExamples/testingForm.ts
+++ /dev/null
@@ -1,190 +0,0 @@
-export const step1 = `module.exports = {
-  setupFilesAfterEnv: ["<rootDir>/setup.js"] // or .ts for TypeScript App
-  // ...other settings
-};`
-
-export const step2 = `import React from "react";
-import { useForm } from "react-hook-form";
-
-export default function App({ login }) {
-  const { register, handleSubmit, formState: { errors }, reset } = useForm();
-  const onSubmit = async data => {
-    await login(data.email, data.password);
-    reset();
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <label htmlFor="email">email</label>
-      <input
-        id="email"
-        {...register("email", {
-          required: "required",
-          pattern: {
-            value: /\\S+@\\S+\\.\\S+/,
-            message: "Entered value does not match email format"
-          }
-        })}
-        type="email"
-      />
-      {errors.email && <span role="alert">{errors.email.message}</span>}
-      <label htmlFor="password">password</label>
-      <input
-        id="password"
-        {...register("password", {
-          required: "required",
-          minLength: {
-            value: 5,
-            message: "min length is 5"
-          }
-        })}
-        type="password"
-      />
-      {errors.password && <span role="alert">{errors.password.message}</span>}
-      <button type="submit">SUBMIT</button>
-    </form>
-  );
-}`
-
-export const step3 = `import React from "react";
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import App from "./App";
-
-const mockLogin = jest.fn((email, password) => {
-  return Promise.resolve({ email, password });
-});
-
-
-it("should display required error when value is invalid", async () => {
-  render(<App login={mockLogin} />);
-
-  fireEvent.submit(screen.getByRole("button"));
-
-  expect(await screen.findAllByRole("alert")).toHaveLength(2);
-  expect(mockLogin).not.toBeCalled();
-});
-
-it("should display matching error when email is invalid", async () => {
-  render(<App login={mockLogin} />);
-  
-  fireEvent.input(screen.getByRole("textbox", { name: /email/i }), {
-    target: {
-      value: "test"
-    }
-  });
-
-  fireEvent.input(screen.getByLabelText("password"), {
-    target: {
-      value: "password"
-    }
-  });
-
-  fireEvent.submit(screen.getByRole("button"));
-
-  expect(await screen.findAllByRole("alert")).toHaveLength(1);
-  expect(mockLogin).not.toBeCalled();
-  expect(screen.getByRole("textbox", { name: /email/i })).toHaveValue("test");
-  expect(screen.getByLabelText("password")).toHaveValue("password");
-});
-
-it("should display min length error when password is invalid", async () => {
-  render(<App login={mockLogin} />);
-  
-  fireEvent.input(screen.getByRole("textbox", { name: /email/i }), {
-    target: {
-      value: "test@mail.com"
-    }
-  });
-
-  fireEvent.input(screen.getByLabelText("password"), {
-    target: {
-      value: "pass"
-    }
-  });
-
-  fireEvent.submit(screen.getByRole("button"));
-
-  expect(await screen.findAllByRole("alert")).toHaveLength(1);
-  expect(mockLogin).not.toBeCalled();
-  expect(screen.getByRole("textbox", { name: /email/i })).toHaveValue(
-    "test@mail.com"
-  );
-  expect(screen.getByLabelText("password")).toHaveValue("pass");
-});
-
-it("should not display error when value is valid", async () => {
-  render(<App login={mockLogin} />);
-
-  fireEvent.input(screen.getByRole("textbox", { name: /email/i }), {
-    target: {
-      value: "test@mail.com"
-    }
-  });
-
-  fireEvent.input(screen.getByLabelText("password"), {
-    target: {
-      value: "password"
-    }
-  });
-
-  fireEvent.submit(screen.getByRole("button"));
-
-  await waitFor(() => expect(screen.queryAllByRole("alert")).toHaveLength(0));
-  expect(mockLogin).toBeCalledWith("test@mail.com", "password");
-  expect(screen.getByRole("textbox", { name: /email/i })).toHaveValue("");
-  expect(screen.getByLabelText("password")).toHaveValue("");
-});
-`
-
-export const actWarningComponent = `import React from "react";
-import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register, handleSubmit, formState } = useForm({
-    mode: "onChange"
-  });
-  const onSubmit = (data) => {};
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input
-        {...register("answer", {
-          required: true
-        })}
-      />
-      <button type="submit">
-        SUBMIT
-      </button>
-    </form>
-  );
-}
-
-`
-export const actWarningTest = `
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import App from "./App";
-
-it("should have a submit button", () => {
-  render(<App />);
-
-  expect(screen.getByText("SUBMIT")).toBeInTheDocument();
-});
-`
-
-export const actWarningSolution = `
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import App from "./App";
-
-it("should have a submit button", async () => {
-  render(<App />)
-
-  expect(await screen.findByText("SUBMIT")).toBeInTheDocument();
-
-  // Now that the UI was awaited until the async behavior was completed,
-  // you can keep asserting with \`get*\` queries.
-  expect(screen.getByRole('textbox')).toBeInTheDocument();
-});
-
-`
diff --git a/src/components/codeExamples/toggleFields.tsx b/src/components/codeExamples/toggleFields.tsx
deleted file mode 100644
index 17acd61e0..000000000
--- a/src/components/codeExamples/toggleFields.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-export default `import React from "react";
-import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register } = useForm();
-
-  return (
-    <div>
-      {watchChecked ? (
-        <input {...register("input3")} key="key1" defaultValue="1" />
-      ) : (
-        <input {...register("input4")} key="key2" defaultValue="2" />
-      )}
-    </div>
-  );
-}
-`
diff --git a/src/components/codeExamples/typeScript.ts b/src/components/codeExamples/typeScript.ts
deleted file mode 100644
index a097d11a1..000000000
--- a/src/components/codeExamples/typeScript.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-export default `import * as React from "react";
-import { useForm } from "react-hook-form";
-
-type FormData = {
-  firstName: string;
-  lastName: string;
-};
-
-export default function App() {
-  const { register, setValue, handleSubmit, formState: { errors } } = useForm<FormData>();
-  const onSubmit = handleSubmit(data => console.log(data));
-  // firstName and lastName will have correct type
-
-  return (
-    <form onSubmit={onSubmit}>
-      <label>First Name</label>
-      <input {...register("firstName")} />
-      <label>Last Name</label>
-      <input {...register("lastName")} />
-      <button
-        type="button"
-        onClick={() => {
-          setValue("lastName", "luo"); // ✅
-          setValue("firstName", true); // ❌: true is not string
-          errors.bill; // ❌: property bill does not exist
-        }}
-      >
-        SetValue
-      </button>
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/unregisterCode.ts b/src/components/codeExamples/unregisterCode.ts
deleted file mode 100644
index a3a0024ae..000000000
--- a/src/components/codeExamples/unregisterCode.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export default `import React, { useEffect } from "react";
-import { useForm } from "react-hook-form";
-
-export default function App() {
-  const { register, handleSubmit, unregister } = useForm();
-  
-  React.useEffect(() => {
-    register("lastName");
-  }, [register])
-
-  return (
-    <form>
-      <button type="button" onClick={() => unregister("lastName")}>unregister</button>
-      <input type="submit" />
-    </form>
-  );
-}`
diff --git a/src/components/codeExamples/unregisterCodeTs.ts b/src/components/codeExamples/unregisterCodeTs.ts
deleted file mode 100644
index 7e34b2b7f..000000000
--- a/src/components/codeExamples/unregisterCodeTs.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export default `import React, { useEffect } from "react";
-import { useForm } from "react-hook-form";
-
-interface IFormInputs {
-  firstName: string;
-  lastName?: string;
-}
-
-export default function App() {
-  const { register, handleSubmit, unregister } = useForm<IFormInputs>();
-  const onSubmit = (data: IFormInputs) => console.log(data);
-
-  React.useEffect(() => {
-    register("lastName");
-  }, [register])
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <button type="button" onClick={() => unregister("lastName")}>unregister</button>
-      <input type="submit" />
-    </form>
-  );
-};
-
-`
diff --git a/src/components/codeExamples/unregisterControlledComponent.tsx b/src/components/codeExamples/unregisterControlledComponent.tsx
deleted file mode 100644
index 1842cb116..000000000
--- a/src/components/codeExamples/unregisterControlledComponent.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-export default `import React, { useEffect } from "react";
-import { useForm } from "react-hook-form";
-
-const CustomInput = React.memo(({ register, unregister, setValue, name }) => {
-  useEffect(() => {
-    register({ name });
-    return () => unregister(name);
-  }, [name, register, unregister]);
-  
-  return <input onChange={e => setValue(name, e.target.value)} />;
-});
-
-function App() {
-  const { register, unregister, handleSubmit, setValue, watch } = useForm();
-  const name = watch("name");
-  const onSubmit = data => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <h1>Unregister Controlled Component</h1>
-
-      <label>Name:</label>
-      <input ref={register} name="name" />
-
-      <label>Conditional Field:</label>
-      {name !== "bill" && (
-        <CustomInput {...{ register, unregister, setValue, name: "test" }} />
-      )}
-
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/unregisterWrapControlledComponent.tsx b/src/components/codeExamples/unregisterWrapControlledComponent.tsx
deleted file mode 100644
index 0973ed624..000000000
--- a/src/components/codeExamples/unregisterWrapControlledComponent.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-export default `import React, { useEffect } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { TextField } from "@material-ui/core";
-
-function App() {
-  const { register, handleSubmit, setValue, watch, control } = useForm();
-  const name = watch("name");
-  const onSubmit = data => console.log(data);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-
-      <label>Name:</label>
-      <input ref={register} name="name" />
-
-      <label>Conditional Field:</label>
-      {name !== "bill" && (
-        <Controller
-          name="test" 
-          as={TextField}
-          control={control} 
-          defaultValue=""
-        />
-      )}
-
-      <input type="submit" />
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/useWatchTypes.ts b/src/components/codeExamples/useWatchTypes.ts
deleted file mode 100644
index 519d6886d..000000000
--- a/src/components/codeExamples/useWatchTypes.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-export default `const none = useWatch<{
-  test: string;
-  test1: number;
-  test2: boolean;
-}>({});
-// const none: {
-//   test?: string | undefined;
-//   test1?: number | undefined;
-//   test2?: boolean | undefined;
-// }
-
-const defaultValueOnly = useWatch<{
-  test: string;
-  test1: number;
-  test2: boolean;
-}>({ defaultValue: { test: 'test' } });
-// const defaultValueOnly: {
-//   test?: string | undefined;
-//   test1?: number | undefined;
-//   test2?: boolean | undefined;
-// }
-
-const nameOnly1 = useWatch<string>({ name: 'test' });
-// const nameOnly1: string | undefined
-
-const nameOnly2 = useWatch<number>({ name: 'test1' });
-// const nameOnly2: number | undefined
-
-const nameOnly3 = useWatch<boolean>({ name: 'test2' });
-// const nameOnly3: boolean | undefined
-
-const namesOnly1 = useWatch<{ test: string }>({ name: ['test'] });
-// const namesOnly1: {
-//   test?: string | undefined;
-// }
-
-const namesOnly2 = useWatch<{
-  test: string;
-  test1: number;
-}>({ name: ['test', 'test1'] });
-// const namesOnly2: {
-//   test?: string | undefined;
-//   test1?: number | undefined;
-// }
-
-const namesOnly3 = useWatch<{
-  test: string;
-  test1: number;
-  test2: boolean;
-}>({ name: ['test', 'test1', 'test2'] });
-// const namesOnly3: {
-//   test?: string | undefined;
-//   test1?: number | undefined;
-//   test2?: boolean | undefined;
-// }
-
-const controlOnly = useWatch<{
-  test: string;
-  test1: number;
-  test2: boolean;
-}>({ control });
-// const controlOnly: {
-//   test?: string | undefined;
-//   test1?: number | undefined;
-//   test2?: boolean | undefined;
-// }
-
-const defaultValueAndControl = useWatch<{
-  test: string;
-  test1: number;
-  test2: boolean;
-}>({
-  defaultValue: { test: 'test' },
-  control,
-});
-// const defaultValueAndControl: {
-//   test?: string | undefined;
-//   test1?: number | undefined;
-//   test2?: boolean | undefined;
-// }
-
-const defaultValueAndName1 = useWatch<string>({
-  name: 'test',
-  defaultValue: 'test',
-});
-// const defaultValueAndName1: string
-
-const defaultValueAndName2 = useWatch<number>({
-  name: 'test1',
-  defaultValue: 1,
-});
-// const defaultValueAndName2: number
-
-const defaultValueAndName3 = useWatch<boolean>({
-  name: 'test2',
-  defaultValue: true,
-});
-// const defaultValueAndName3: boolean
-
-const defaultValueAndNames1 = useWatch<{ test: string }>({
-  defaultValue: { test: 'test' },
-  name: ['test'],
-});
-// const defaultValueAndNames1: {
-//   test?: string | undefined;
-// }
-
-const defaultValueAndNames2 = useWatch<{
-  test: string;
-  test1: number;
-}>({
-  defaultValue: { test: 'test', test1: 1 },
-  name: ['test', 'test1'],
-});
-// const defaultValueAndNames2: {
-//   test?: string | undefined;
-//   test1?: number | undefined;
-// }
-
-const defaultValueAndNames3 = useWatch<{
-  test: string;
-  test1: number;
-  test2: boolean;
-}>({
-  defaultValue: { test: 'test', test1: 1, test2: true },
-  name: ['test', 'test1', 'test2'],
-});
-// const defaultValueAndNames3: {
-//   test?: string | undefined;
-//   test1?: number | undefined;
-//   test2?: boolean | undefined;
-// }
-
-const nameAndControl = useWatch<number>({ name: 'test1', control });
-// const nameAndControl: number | undefined
-
-const namesAndControl = useWatch<{
-  test: string;
-  test1: number;
-}>({ name: ['test', 'test1'], control });
-// const namesAndControl: {
-//   test?: string | undefined;
-//   test1?: number | undefined;
-// }
-
-const defaultValueAndNameAndControl1 = useWatch<number>({
-  defaultValue: 1,
-  name: 'test1',
-  control,
-});
-// const defaultValueAndNameAndControl1: number
-
-const defaultValueAndNamesAndControl2 = useWatch<{
-  test: string;
-  test1: number;
-  test2: boolean;
-}>({
-  name: ['test', 'test1', 'test2'],
-  defaultValue: { test: 'test', test1: 1, test2: true },
-  control,
-});
-// const defaultValueAndNamesAndControl2: {
-//   test?: string | undefined;
-//   test1?: number | undefined;
-//   test2?: boolean | undefined;
-// }
-
-// type error
-const error1 = useWatch<string>({ control, name: 'test', defaultValue: 1 }); // ❌
-const output2 = useWatch<{
-  test: string;
-  test1: number;
-  test2: boolean;
-}>({
-  control,
-  name: ['test', 'test2'],
-  defaultValue: { test: 1, test2: true },
-}); // ❌
-
-const output3 = useWatch<{
-  test: string;
-  test1: number;
-  test2: boolean;
-}>({
-  control,
-  name: ['test', 'test2'],
-  defaultValue: { notExists: 'notExists', test2: true },
-}); // ❌
-
-// expect type error, but no type error because support nested object
-const expectTypError = useWatch<{
-  test: string;
-  test1: number;
-  test2: boolean;
-}>({ control, name: ['test1', 'notExists'] }); // ✅
-// const expectTypError: {
-//   test?: string | undefined;
-//   test1?: number | undefined;
-//   test2?: boolean | undefined;
-// }
-`
diff --git a/src/components/codeExamples/validationResolver.ts b/src/components/codeExamples/validationResolver.ts
deleted file mode 100644
index 6a7131f96..000000000
--- a/src/components/codeExamples/validationResolver.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-export default `import * as React from "react";
-import { useForm } from "react-hook-form";
-import * as Joi from "joi";
-
-const validationSchema = Joi.object({
-  username: Joi.string()
-    .alphanum()
-    .min(3)
-    .max(30)
-    .required()
-});
-
-const App = () => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm({
-    context: "context",
-    resolver: async (data, context) => {
-      const { error, value: values } = validationSchema.validate(data, {
-        abortEarly: false,
-      });
-
-      if (!error) return { values: values, errors: {} };
-
-      return {
-        values: {},
-        errors: error.details.reduce(
-          (previous, currentError) => ({
-            ...previous,
-            [currentError.path[0]]: currentError,
-          }),
-          {},
-        ),
-      };
-    },
-  });
-
-  const onSubmit = data => {
-    console.log(data)
-  };
-
-  return (
-    <div className="App">
-      <h1>resolver</h1>
-      
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <label>Username</label>
-        <input {...register("username")} />
-        {errors.username && <p>errors.username.message</p>}
-        <input type="submit" />
-      </form>
-    </div>
-  );
-};
-`
diff --git a/src/components/codeExamples/validationResolverTs.tsx b/src/components/codeExamples/validationResolverTs.tsx
deleted file mode 100644
index 91fb55591..000000000
--- a/src/components/codeExamples/validationResolverTs.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-export default `import * as React from "react";
-import { useForm } from "react-hook-form";
-import * as Joi from "joi";
-
-interface IFormInputs {
-  username: string;
-}
-
-const validationSchema = Joi.object({
-  username: Joi.string()
-    .alphanum()
-    .min(3)
-    .max(30)
-    .required()
-});
-
-const App = () => {
-  const { register, handleSubmit, formState: { errors } } = useForm<IFormInputs>({
-    resolver: async data => {
-      const { error, value: values } = validationSchema.validate(data, {
-        abortEarly: false
-      });
-
-      return {
-        values: error ? {} : values,
-        errors: error
-          ? error.details.reduce((previous, currentError) => {
-              return {
-                ...previous,
-                [currentError.path[0]]: currentError
-              };
-            }, {})
-          : {}
-      };
-    }
-  });
-
-  const onSubmit = (data: IFormInputs) => console.log(data);
-
-  return (
-    <div className="App">
-      <h1>resolver</h1>
-
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <label>Username</label>
-        <input {...register("username")} />
-        {errors.username && <p>errors.username.message</p>}
-        <input type="submit" />
-      </form>
-    </div>
-  );
-};
-`
diff --git a/src/components/codeExamples/validationSchema.ts b/src/components/codeExamples/validationSchema.ts
deleted file mode 100644
index 7e51792dc..000000000
--- a/src/components/codeExamples/validationSchema.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export default `import React from 'react';
-import { useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from "yup";
-
-const schema = yup.object().shape({
-  name: yup.string().required(),
-  age: yup.number().required(),
-}).required();
-
-const App = () => {
-  const { register, handleSubmit } = useForm({
-    resolver: yupResolver(schema),
-  });
-
-  return (
-    <form onSubmit={handleSubmit(d => console.log(d))}>
-      <input {...register("name")} />
-      <input type="number" {...register("age")} />
-      <input type="submit" />
-    </form>
-  );
-};`
diff --git a/src/components/codeExamples/validationSchemaNative.ts b/src/components/codeExamples/validationSchemaNative.ts
deleted file mode 100644
index 2676b8044..000000000
--- a/src/components/codeExamples/validationSchemaNative.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export default `import React from "react";
-import { Text, View, TextInput, Button, Alert } from "react-native";
-import { useForm } from "react-hook-form";
-
-const schema = yup.object().shape({
-  firstName: yup.string().required(),
-  lastName: yup.number().required(),
-}).required();
-
-export default function App() {
-  const { register, setValue, handleSubmit, formState: { errors } } = useForm({
-    validationSchema: schema
-  });
-  const onSubmit = data => Alert.alert("Form Data", JSON.stringify(data));
-  
-  useEffect(() => {
-    register("firstName");
-    register("lastName");
-  }, [register]);
-
-  return (
-    <View>
-      <Text>First name</Text>
-      <TextInput onChangeText={text => setValue("firstName", text, true)} />
-      {errors.firstName && <Text>This is required.</Text>}
-
-      <Text>Last name</Text>
-      <TextInput onChangeText={text => setValue("lastName", text)} />
-
-      <Button onPress={handleSubmit(onSubmit)} />
-    </View>
-  );
-}
-`
diff --git a/src/components/codeExamples/validationSchemaTs.ts b/src/components/codeExamples/validationSchemaTs.ts
deleted file mode 100644
index 70221af79..000000000
--- a/src/components/codeExamples/validationSchemaTs.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export default `import React from 'react';
-import { useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from "yup";
-
-type Inputs = {
-  name: string;
-  age: string;
-};
-
-const schema = yup.object().shape({
-  name: yup.string().required(),
-  age: yup.number().required(),
-}).required();
-
-const App = () => {
-  const { register, handleSubmit } = useForm<Inputs>({
-    resolver: yupResolver(schema), // yup, joi and even your own.
-  });
-
-  return (
-    <form onSubmit={handleSubmit(d => console.log(d))}>
-      <input {...register("name")} />
-      <input type="number" {...register("age")} />
-      <input type="submit" />
-    </form>
-  );
-};`
diff --git a/src/components/codeExamples/vestResolver.tsx b/src/components/codeExamples/vestResolver.tsx
deleted file mode 100644
index 80d0f2dfd..000000000
--- a/src/components/codeExamples/vestResolver.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-export default `import * as React from 'react';
-import { useForm } from 'react-hook-form';
-import { vestResolver } from '@hookform/resolvers/vest';
-import vest, { test, enforce } from 'vest';
-
-const validationSuite = vest.create((data = {}) => {
-  test('username', 'Username is required', () => {
-    enforce(data.username).isNotEmpty();
-  });
-
-  test('username', 'Must be longer than 3 chars', () => {
-    enforce(data.username).longerThan(3);
-  });
-
-  test('password', 'Password is required', () => {
-    enforce(data.password).isNotEmpty();
-  });
-
-  test('password', 'Password must be at least 5 chars', () => {
-    enforce(data.password).longerThanOrEquals(5);
-  });
-
-  test('password', 'Password must contain a digit', () => {
-    enforce(data.password).matches(/[0-9]/);
-  });
-
-  test('password', 'Password must contain a symbol', () => {
-    enforce(data.password).matches(/[^A-Za-z0-9]/);
-  });
-});
-
-const App = () => {
-  const { register, handleSubmit } = useForm({
-    resolver: vestResolver(validationSuite),
-  });
-
-  return (
-    <form onSubmit={handleSubmit((data) => console.log(data))}>
-      <input {...register("username")} />
-      <input {...register("password")} />
-      <input type="submit" />
-    </form>
-  );
-};
-`
diff --git a/src/components/codeExamples/virtualizedList.ts b/src/components/codeExamples/virtualizedList.ts
deleted file mode 100644
index 4af1e2f8c..000000000
--- a/src/components/codeExamples/virtualizedList.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-export default `import React from 'react'
-import { FormProvider, useForm, useFormContext } from 'react-hook-form'
-import { VariableSizeList as List } from 'react-window'
-import AutoSizer from 'react-virtualized-auto-sizer'
-import ReactDOM from 'react-dom'
-import './styles.css'
-
-const items = Array.from(Array(1000).keys()).map((i) => ({
-  title: \`List \${i}\`,
-  quantity: Math.floor(Math.random() * 10),
-}))
-
-const WindowedRow = React.memo(({ index, style, data }) => {
-  const { register } = useFormContext()
-
-  return <input {...register(\`\${index}.quantity\`)} />
-})
-
-export const App = () => {
-  const onSubmit = (data) => console.log(data)
-  const formMethods = useForm({ defaultValues: items })
-
-  return (
-    <form className="form" onSubmit={formMethods.handleSubmit(onSubmit)}>
-      <FormProvider {...formMethods}>
-        <AutoSizer>
-          {({ height, width }) => (
-            <List
-              height={height}
-              itemCount={items.length}
-              itemSize={() => 100}
-              width={width}
-              itemData={items}>
-              {WindowedRow}
-            </List>
-          )}
-        </AutoSizer>
-      </FormProvider>
-      <button type="submit">Submit</button>
-    </form>
-  )
-}
-`
diff --git a/src/components/codeExamples/virtualizedListFieldArray.ts b/src/components/codeExamples/virtualizedListFieldArray.ts
deleted file mode 100644
index ce7c35127..000000000
--- a/src/components/codeExamples/virtualizedListFieldArray.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-export default `import { FixedSizeList } from "react-window";
-import { Controller, useFieldArray, useForm } from "react-hook-form";
-
-const items = Array.from(Array(1000).keys()).map((i) => ({
-  title: \`List \${i}\`,
-  quantity: Math.floor(Math.random() * 10)
-}))
-
-function App() {
-  const { control, getValues } = useForm({
-    defaultValues: {
-      test: items
-    },
-  });
-  const { fields, remove } = useFieldArray({ control, name: "test" });
-
-  return (
-    <FixedSizeList
-      width={400}
-      height={500}
-      itemSize={40}
-      itemCount={fields.length}
-      itemData={fields}
-      itemKey={(i) => fields[i].id}
-    >
-      {({ style, index, data }) => {
-        const defaultValue =
-          getValues()["test"][index].quantity ?? data[index].quantity;
-
-        return (
-          <form style={style}>
-            <Controller
-              render={({ field }) => <input {...field} />}
-              name={\`test[\${index}].quantity\`}
-              defaultValue={defaultValue}
-              control={control}
-            />
-          </form>
-        );
-      }}
-    </FixedSizeList>
-  );
-}
-`
diff --git a/src/components/codeExamples/watchCode.ts b/src/components/codeExamples/watchCode.ts
deleted file mode 100644
index 568c6bd6c..000000000
--- a/src/components/codeExamples/watchCode.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export default `import React from "react";
-import { useForm } from "react-hook-form";
-
-function App() {
-  const { register, watch, formState: { errors }, handleSubmit } = useForm();
-  const watchShowAge = watch("showAge", false); // you can supply default value as second argument
-  const watchAllFields = watch(); // when pass nothing as argument, you are watching everything
-  const watchFields = watch(["showAge", "number"]); // you can also target specific fields by their names
-
-  // Callback version of watch.  It's your responsibility to unsubscribe when done.
-  React.useEffect(() => {
-    const subscription = watch((value, { name, type }) => console.log(value, name, type));
-    return () => subscription.unsubscribe();
-  }, [watch]);
-
-  const onSubmit = data => console.log(data);
-
-  return (
-    <>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <input type="checkbox" {...register("showAge")} />
-        
-        {/* based on yes selection to display Age Input*/}
-        {watchShowAge && <input type="number" {...register("age", { min: 50 })} />}
-        
-        <input type="submit" />
-      </form>
-    </>
-  );
-}
-`
diff --git a/src/components/codeExamples/watchCodeTs.ts b/src/components/codeExamples/watchCodeTs.ts
deleted file mode 100644
index ddc824ee0..000000000
--- a/src/components/codeExamples/watchCodeTs.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-export default `import React from "react";
-import { useForm } from "react-hook-form";
-
-interface IFormInputs {
-  name: string
-  showAge: boolean
-  age: number
-}
-
-function App() {
-  const { register, watch, formState: { errors }, handleSubmit } = useForm<IFormInputs>();
-  const watchShowAge = watch("showAge", false); // you can supply default value as second argument
-  const watchAllFields = watch(); // when pass nothing as argument, you are watching everything
-  const watchFields = watch(["showAge", "age"]); // you can also target specific fields by their names
-
-  // Callback version of watch.  It's your responsibility to unsubscribe when done.
-  React.useEffect(() => {
-    const subscription = watch((value, { name, type }) => console.log(value, name, type));
-    return () => subscription.unsubscribe();
-  }, [watch]);
-
-  const onSubmit = (data: IFormInputs) => console.log(data);
-
-  return (
-    <>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <input {...register("name", { required: true, maxLength: 50 })} />
-        <input type="checkbox" {...register("showAge")} />
-        {/* based on yes selection to display Age Input*/}
-        {watchShowAge && (
-          <input type="number" {...register("age", { min: 50 })} />
-        )}
-        <input type="submit" />
-      </form>
-    </>
-  );
-}
-`
diff --git a/src/components/codeExamples/watchCodeTypes.ts b/src/components/codeExamples/watchCodeTypes.ts
deleted file mode 100644
index 0e81bb6fc..000000000
--- a/src/components/codeExamples/watchCodeTypes.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-export default `import React from "react";
-import { useForm } from "react-hook-form";
-
-type Inputs = {
-  key1: string;
-  key2: number;
-  key3: {
-    key1: number;
-    key2: boolean;
-  };
-};
-
-export default function App(props) {
-  const { watch } = useForm<FormValues>;
-
-  watch();
-  // function watch(): FormValues
-  watch({ nest: true });
-  // function watch(option: { nest: boolean; }): FormValues
-  watch("key1");
-  // function watch<"key1">(field: "key1", defaultValue?: string | undefined): string
-  watch("key1", "test");
-  // function watch<"key1">(field: "key1", defaultValue?: string | undefined): string
-  watch("key1", true);
-  // ❌: type error
-  watch("key3.key1");
-  // function watch<unknown>(field: string, defaultValue?: unknown): unknown
-  watch("key3.key1", 1);
-  // function watch<1>(field: string, defaultValue?: 1 | undefined): number
-  watch("key3.key1", "test");
-  // function watch<"key3.key1", "test">(field: "key3.key1", defaultValue?: string | undefined): string
-  watch("key3.key2", true);
-  // function watch<true>(field: string, defaultValue?: true | undefined): boolean
-  watch(["key1", "key2"]);
-  // function watch<"key1" | "key2">(fields: ("key1" | "key2")[], defaultValues?: DeepPartial<Pick<FormValues, "key1" | "key2">> | undefined): Pick<FormValues, "key1" | "key2">
-  watch(["key1", "key2"], { key1: "test" });
-  // function watch<"key1" | "key2">(fields: ("key1" | "key2")[], defaultValues?: DeepPartial<Pick<FormValues, "key1" | "key2">> | undefined): Pick<FormValues, "key1" | "key2">
-  watch(["key1", "key2"], { key1: "test", key2: true });
-  // ❌: type error
-  watch(["key1", "key3.key1"], { key1: "string" });
-  // function watch(fields: string[], defaultValues?: DeepPartial<FormValues> | undefined): DeepPartial<FormValues>
-  watch(["key1", "key3.key1"], { test: "string" });
-  // ❌: type error
-  watch<string, FormData["key3"]["key1"]>("key3.key1");
-  //  => string
-  watch<string, FormData["key3"]["key2"]>("key3.key2");
-  //  => string
-  
-  return <form />;
-}`
diff --git a/src/components/codeExamples/watchFieldArrayCode.ts b/src/components/codeExamples/watchFieldArrayCode.ts
deleted file mode 100644
index 721cc7f57..000000000
--- a/src/components/codeExamples/watchFieldArrayCode.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-export default `import * as React from "react";
-import { useForm, useFieldArray, ArrayField } from "react-hook-form";
-
-function App() {
-  const { register, control, handleSubmit, watch } = useForm();
-  const { fields, remove, append } = useFieldArray({
-    name: "test",
-    control
-  });
-  const onSubmit = (data: FormValues) => console.log(data);
-  
-  console.log(watch("test")); 
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      {fields.map((field, index) => {
-        return (
-          <input
-            key={field.id}
-            {...register(\`test[\${index}].firstName\`)}
-          />
-        );
-      })}
-      <button
-        type="button"
-        onClick={() =>
-          append({
-            firstName: "bill" + renderCount,
-            lastName: "luo" + renderCount
-          })
-        }
-      >
-        Append
-      </button>
-    </form>
-  );
-}
-`
diff --git a/src/components/codeExamples/zodResolver.ts b/src/components/codeExamples/zodResolver.ts
deleted file mode 100644
index d172f73f6..000000000
--- a/src/components/codeExamples/zodResolver.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export default `import React from "react";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
-
-const schema = z.object({
-  name: z.string(),
-  age: z.number()
-});
-
-const App = () => {
-  const { register, handleSubmit } = useForm({
-    resolver: zodResolver(schema)
-  });
-
-  return (
-    <form onSubmit={handleSubmit(d => console.log(d))}>
-      <input {...register("name")} />
-      <input {...register("age", { valueAsNumber: true })} type="number" />
-      <input type="submit" />
-    </form>
-  );
-};
-`
diff --git a/src/components/codeExamples/zodResolverTs.ts b/src/components/codeExamples/zodResolverTs.ts
deleted file mode 100644
index 9fa91be08..000000000
--- a/src/components/codeExamples/zodResolverTs.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export default `import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
-
-const schema = z.object({
-  name: z.string(),
-  age: z.number()
-});
-
-type Schema = z.infer<typeof schema>;
-
-const App = () => {
-  const { register, handleSubmit } = useForm<Schema>({
-    resolver: zodResolver(schema)
-  });
-
-  const onSubmit = (data: Schema) => {
-    console.log(data);
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register("name")} />
-      <input {...register("age", { valueAsNumber: true })} type="number" />
-      <input type="submit" />
-    </form>
-  );
-};
-`
diff --git a/src/components/layout.css b/src/components/layout.css
index e6020ca8e..571b784c2 100644
--- a/src/components/layout.css
+++ b/src/components/layout.css
@@ -53,6 +53,7 @@ body {
     "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 0.9rem;
 }
 
 ::-webkit-scrollbar {
@@ -70,26 +71,6 @@ body {
   background: var(--color-light-pink);
 }
 
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
 audio:not([controls]) {
   display: none;
   height: 0;
@@ -97,10 +78,7 @@ audio:not([controls]) {
 progress {
   vertical-align: baseline;
 }
-[hidden],
-template {
-  display: none;
-}
+
 a {
   background-color: transparent;
   color: var(--color-link);
@@ -115,16 +93,7 @@ a:hover {
 a:active {
   transform: translateY(2px);
 }
-abbr[title] {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-b,
-strong {
-  font-weight: inherit;
-  font-weight: bolder;
-}
+
 dfn {
   font-style: italic;
 }
@@ -174,7 +143,7 @@ hr {
   overflow: visible;
   border: none;
   border-top: 1px solid #516391;
-  margin: 40px 0 60px;
+  margin: 10px 0 10px;
   display: block;
 }
 button,
@@ -263,15 +232,6 @@ textarea {
   font: inherit;
 }
 
-p {
-  line-height: 1.5;
-  font-size: 0.9rem;
-}
-
-li > p {
-  margin: 0.2rem;
-}
-
 input,
 select,
 button {
@@ -478,10 +438,6 @@ a.skip-main:active {
   z-index: 999;
 }
 
-h4 {
-  margin-bottom: 10px;
-}
-
 .more.icon {
   color: #fff;
   position: absolute;
@@ -790,19 +746,6 @@ pre[class*="language-"] {
   position: relative;
 }
 
-pre[class*="language-"] code {
-  white-space: pre;
-  display: block;
-  line-height: 1.5;
-}
-
-:not(pre) > code[class*="language-"] {
-  padding: 0.15em 0.2em 0.05em;
-  border-radius: 0.3em;
-  border: 0.13em solid #7a6652;
-  box-shadow: 1px 1px 0.3em -0.1em #000 inset;
-}
-
 .token.namespace {
   opacity: 0.7;
 }
diff --git a/src/components/mdx/mdx.tsx b/src/components/mdx/mdx.tsx
index 33c56a673..8b0ffbc5c 100644
--- a/src/components/mdx/mdx.tsx
+++ b/src/components/mdx/mdx.tsx
@@ -2,10 +2,11 @@ import { PrismSyntaxHighlight } from "./code"
 import { Pre } from "./pre"
 import TabGroup from "../TabGroup"
 import { YouTube } from "./youtube"
-import { CodeSandBoxLink } from "../CodeArea"
 import TypeText from "../TypeText"
 import Popup from "../Popup"
 import { Components } from "@mdx-js/react/lib"
+import { Admonition } from "../Admonition"
+import { CodeSandBoxLink } from "../CodeSandbox"
 
 export const MDXComponents: Components = {
   // p: P,
@@ -22,6 +23,7 @@ export const MDXComponents: Components = {
   // a: Link,
   // img: ResponsiveImage,
   // Layout,
+  Admonition,
   Popup,
   TypeText,
   YouTube(props) {
diff --git a/src/components/mdx/pre.tsx b/src/components/mdx/pre.tsx
index de8d6374e..b1c05ba20 100644
--- a/src/components/mdx/pre.tsx
+++ b/src/components/mdx/pre.tsx
@@ -2,7 +2,7 @@ import { useRef } from "react"
 import ClipBoard from "../ClipBoard"
 import styles from "../CodeArea.module.css"
 import copyClipBoard from "../utils/copyClipBoard"
-import { CodeSandBoxLink } from "../CodeArea"
+import { CodeSandBoxLink } from "../CodeSandbox"
 
 export const Pre = (props) => {
   const preRef = useRef<HTMLDivElement>(null)
diff --git a/src/components/react-app-env.d.ts b/src/components/react-app-env.d.ts
deleted file mode 100644
index 7c1dfb879..000000000
--- a/src/components/react-app-env.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module "*.mp4" {
-  const src: string
-  export default src
-}
diff --git a/src/components/useController/Controller.tsx b/src/components/useController/Controller.tsx
deleted file mode 100644
index b362afd5e..000000000
--- a/src/components/useController/Controller.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import Footer from "../Footer"
-import { Menu } from "../Menu"
-import api from "../../data/api"
-import typographyStyles from "../../styles/typography.module.css"
-import containerStyles from "../../styles/container.module.css"
-import ControllerContent from "../ControllerContent"
-import StarRepo from "../StarRepo"
-
-const Controller = () => {
-  return (
-    <div className={containerStyles.container}>
-      <h1 className={typographyStyles.headingWithTopMargin} id="main">
-        Controller
-      </h1>
-      <p className={typographyStyles.subHeading}>
-        Wrapper component for controlled inputs
-      </p>
-
-      <div className={containerStyles.wrapper}>
-        <Menu />
-
-        <main>
-          <section>
-            <ControllerContent api={api} />
-
-            <StarRepo />
-          </section>
-
-          <Footer />
-        </main>
-      </div>
-    </div>
-  )
-}
-
-export default Controller
diff --git a/src/components/useForm/ClearErrors.tsx b/src/components/useForm/ClearErrors.tsx
deleted file mode 100644
index f626c46be..000000000
--- a/src/components/useForm/ClearErrors.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import Footer from "../Footer"
-import { Menu } from "../Menu"
-import api from "../../data/api"
-import typographyStyles from "../../styles/typography.module.css"
-import containerStyles from "../../styles/container.module.css"
-import CodeArea from "../CodeArea"
-import clearError from "../codeExamples/clearError"
-import clearErrorTs from "../codeExamples/clearErrorTs"
-import StarRepo from "../StarRepo"
-
-const ClearErrors = () => {
-  return (
-    <div className={containerStyles.container}>
-      <h1 className={typographyStyles.headingWithTopMargin} id="main">
-        clearErrors
-      </h1>
-      <p className={typographyStyles.subHeading}>Clear form errors</p>
-
-      <div className={containerStyles.wrapper}>
-        <Menu />
-
-        <main>
-          <section>
-            <code className={typographyStyles.codeHeading}>
-              <h2>
-                clearErrors:{" "}
-                <span className={typographyStyles.typeText}>
-                  (name?: string | string[]) =&gt; void
-                </span>
-              </h2>
-            </code>
-            {api.clearError.description}
-
-            <h2 id="example" className={typographyStyles.subTitle}>
-              Examples
-            </h2>
-
-            <CodeArea
-              rawData={clearError}
-              url="https://codesandbox.io/s/react-hook-form-v7-clearerrors-w5tl6"
-              tsRawData={clearErrorTs}
-              tsUrl="https://codesandbox.io/s/react-hook-form-v7-ts-clearerrors-w3ymx"
-            />
-
-            <StarRepo />
-          </section>
-
-          <Footer />
-        </main>
-      </div>
-    </div>
-  )
-}
-
-export default ClearErrors
diff --git a/src/components/useForm/Control.tsx b/src/components/useForm/Control.tsx
deleted file mode 100644
index 180a41a62..000000000
--- a/src/components/useForm/Control.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import Footer from "../Footer"
-import { Menu } from "../Menu"
-import api from "../../data/api"
-import typographyStyles from "../../styles/typography.module.css"
-import containerStyles from "../../styles/container.module.css"
-import CodeArea from "../CodeArea"
-import control from "../codeExamples/control"
-import controlTs from "../codeExamples/controlTs"
-import StarRepo from "../StarRepo"
-
-const Control = () => {
-  return (
-    <div className={containerStyles.container}>
-      <h1 className={typographyStyles.headingWithTopMargin} id="main">
-        control
-      </h1>
-      <p className={typographyStyles.subHeading}>Take control of the form</p>
-
-      <div className={containerStyles.wrapper}>
-        <Menu />
-
-        <main>
-          <section>
-            <code className={typographyStyles.codeHeading}>
-              <h2>
-                control:{" "}
-                <span className={typographyStyles.typeText}>Object</span>
-              </h2>
-            </code>
-            {api.control.description}
-
-            <h2 id="example" className={typographyStyles.subTitle}>
-              Examples
-            </h2>
-
-            <CodeArea
-              rawData={control}
-              url="https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5"
-              tsRawData={controlTs}
-              tsUrl="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
-            />
-
-            <StarRepo />
-          </section>
-
-          <Footer />
-        </main>
-      </div>
-    </div>
-  )
-}
-
-export default Control
diff --git a/src/components/useForm/HandleSubmit.tsx b/src/components/useForm/HandleSubmit.tsx
deleted file mode 100644
index 3d6a0c351..000000000
--- a/src/components/useForm/HandleSubmit.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import Footer from "../Footer"
-import { Menu } from "../Menu"
-import api from "../../data/api"
-import typographyStyles from "../../styles/typography.module.css"
-import containerStyles from "../../styles/container.module.css"
-import TabGroup from "../TabGroup"
-import CodeArea from "../CodeArea"
-import handleSubmitCode from "../codeExamples/handleSubmitCode"
-import handleSubmitCodeTs from "../codeExamples/handleSubmitCodeTs"
-import handleSubmitAsyncCode from "../codeExamples/handleSubmitAsyncCode"
-import StarRepo from "../StarRepo"
-
-const HandleSubmit = () => {
-  return (
-    <div className={containerStyles.container}>
-      <h1 className={typographyStyles.headingWithTopMargin} id="main">
-        handleSubmit
-      </h1>
-      <p className={typographyStyles.subHeading}>Ready to send to the server</p>
-
-      <div className={containerStyles.wrapper}>
-        <Menu />
-
-        <main>
-          <section>
-            <code className={typographyStyles.codeHeading}>
-              <h2>
-                handleSubmit: <br />
-                <span className={typographyStyles.typeText}>
-                  ((data: Object, e?: Event) =&gt; {`Promise<void>`}, (errors:
-                  Object, e?: Event) =&gt; void) =&gt; {`Promise<void>`}
-                </span>
-              </h2>
-            </code>
-            {api.handleSubmit.description}
-
-            <h2 id="example" className={typographyStyles.subTitle}>
-              Examples
-            </h2>
-
-            <TabGroup buttonLabels={["sync", "async"]}>
-              <CodeArea
-                rawData={handleSubmitCode}
-                tsRawData={handleSubmitCodeTs}
-                url="https://codesandbox.io/s/react-hook-form-handlesubmit-v7-uqmiy"
-                tsUrl="https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-lcrtu"
-              />
-              <CodeArea
-                rawData={handleSubmitAsyncCode}
-                url="https://codesandbox.io/s/react-hook-form-async-submit-validation-kpx0o"
-              />
-            </TabGroup>
-
-            <h2 className={typographyStyles.subTitle}>Video</h2>
-
-            <p>
-              The following video tutorial explains the{" "}
-              <code>handleSubmit</code> API in detail.
-            </p>
-
-            <iframe
-              width="100%"
-              height="528"
-              title="react hook form controller build"
-              src="https://www.youtube.com/embed/KzcPKB9SOEk"
-              frameBorder="0"
-              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-              allowFullScreen
-            />
-
-            <StarRepo />
-          </section>
-
-          <Footer />
-        </main>
-      </div>
-    </div>
-  )
-}
-
-export default HandleSubmit
diff --git a/src/components/useForm/Reset.tsx b/src/components/useForm/Reset.tsx
deleted file mode 100644
index 9143625c9..000000000
--- a/src/components/useForm/Reset.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import Footer from "../Footer"
-import { Menu } from "../Menu"
-import api from "../../data/api"
-import typographyStyles from "../../styles/typography.module.css"
-import containerStyles from "../../styles/container.module.css"
-import TabGroup from "../TabGroup"
-import CodeArea from "../CodeArea"
-import resetCode from "../codeExamples/resetCode"
-import resetCodeTs from "../codeExamples/resetCodeTs"
-import resetController from "../codeExamples/resetController"
-import resetControllerTs from "../codeExamples/resetControllerTs"
-import submitReset from "../codeExamples/submitReset"
-import fieldArrayReset from "../codeExamples/fieldArrayReset"
-import StarRepo from "../StarRepo"
-
-const Reset = () => {
-  return (
-    <div className={containerStyles.container}>
-      <h1 className={typographyStyles.headingWithTopMargin} id="main">
-        reset
-      </h1>
-      <p className={typographyStyles.subHeading}>Reset form state and values</p>
-
-      <div className={containerStyles.wrapper}>
-        <Menu />
-
-        <main>
-          <section>
-            <code className={typographyStyles.codeHeading}>
-              <h2>
-                reset:{" "}
-                <span
-                  className={typographyStyles.typeText}
-                >{`<T>(values?: T | ResetAction<T>, options?: Record<string, boolean>) => void`}</span>
-              </h2>
-            </code>
-
-            {api.reset.description}
-
-            <h2 id="example" className={typographyStyles.subTitle}>
-              Examples
-            </h2>
-
-            <TabGroup
-              buttonLabels={[
-                "Uncontrolled",
-                "Controller",
-                "Submit with reset",
-                "Field Array",
-              ]}
-            >
-              <CodeArea
-                rawData={resetCode}
-                tsRawData={resetCodeTs}
-                url="https://codesandbox.io/s/react-hook-form-reset-v7-r7m5s"
-                tsUrl="https://codesandbox.io/s/react-hook-form-reset-v7-ts-pu901"
-              />
-              <CodeArea
-                rawData={resetController}
-                tsRawData={resetControllerTs}
-                url="https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5"
-                tsUrl="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
-              />
-              <CodeArea
-                rawData={submitReset}
-                url="https://codesandbox.io/s/react-hook-form-handlesubmit-with-reset-xu1zu"
-              />
-              <CodeArea
-                rawData={fieldArrayReset}
-                url="https://codesandbox.io/s/react-hook-form-reset-usefieldarray-forked-kdh2s"
-              />
-            </TabGroup>
-          </section>
-
-          <h2 className={typographyStyles.subTitle}>Video</h2>
-          <p>
-            The following video explains in detail each different{" "}
-            <code>formState</code> represents and functionality within the{" "}
-            <code>reset</code> API.
-          </p>
-
-          <iframe
-            width="100%"
-            height="528"
-            title="react hook form reset"
-            src="https://www.youtube.com/embed/qmCLBjyPwVk"
-            frameBorder="0"
-            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-            allowFullScreen
-          />
-
-          <StarRepo />
-
-          <Footer />
-        </main>
-      </div>
-    </div>
-  )
-}
-
-export default Reset
diff --git a/src/components/useForm/SetFocus.tsx b/src/components/useForm/SetFocus.tsx
deleted file mode 100644
index 34ba10eb6..000000000
--- a/src/components/useForm/SetFocus.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import Footer from "../Footer"
-import { Menu } from "../Menu"
-import api from "../../data/api"
-import CodeArea from "../CodeArea"
-import setFocus from "../codeExamples/setFocus"
-import setFocusTs from "../codeExamples/setFocusTs"
-import typographyStyles from "../../styles/typography.module.css"
-import containerStyles from "../../styles/container.module.css"
-import StarRepo from "../StarRepo"
-
-const SetFocus = () => {
-  return (
-    <div className={containerStyles.container}>
-      <h1 className={typographyStyles.headingWithTopMargin} id="main">
-        setFocus
-      </h1>
-      <p className={typographyStyles.subHeading}>Manually set an input focus</p>
-
-      <div className={containerStyles.wrapper}>
-        <Menu />
-
-        <main>
-          <section>
-            <code className={typographyStyles.codeHeading}>
-              <h2>
-                setFocus:
-                <span className={typographyStyles.typeText}>
-                  {`(name: string, options: SetFocusOptions) => void`}
-                </span>
-              </h2>
-            </code>
-
-            {api.setFocus.description}
-
-            <h2 id="example" className={typographyStyles.subTitle}>
-              Examples
-            </h2>
-
-            <CodeArea
-              rawData={setFocus}
-              tsRawData={setFocusTs}
-              url="https://codesandbox.io/s/setfocus-rolus"
-              tsUrl="https://codesandbox.io/s/setfocus-rolus"
-            />
-
-            <StarRepo />
-          </section>
-
-          <Footer />
-        </main>
-      </div>
-    </div>
-  )
-}
-
-export default SetFocus
diff --git a/src/components/useForm/UnRegister.tsx b/src/components/useForm/UnRegister.tsx
deleted file mode 100644
index 868a2cf65..000000000
--- a/src/components/useForm/UnRegister.tsx
+++ /dev/null
@@ -1,268 +0,0 @@
-import Footer from "../Footer"
-import { Menu } from "../Menu"
-import api from "../../data/api"
-import typographyStyles from "../../styles/typography.module.css"
-import containerStyles from "../../styles/container.module.css"
-import tableStyles from "../../styles/table.module.css"
-import CodeArea from "../CodeArea"
-import unregisterCode from "../codeExamples/unregisterCode"
-import unregisterCodeTs from "../codeExamples/unregisterCodeTs"
-import generic from "../../data/generic"
-import StarRepo from "../StarRepo"
-
-const UnRegister = () => {
-  return (
-    <div className={containerStyles.container}>
-      <h1 className={typographyStyles.headingWithTopMargin} id="main">
-        unregister
-      </h1>
-      <p className={typographyStyles.subHeading}>
-        Unregister uncontrolled/controlled inputs
-      </p>
-
-      <div className={containerStyles.wrapper}>
-        <Menu />
-
-        <main>
-          <section id="unregisterRef">
-            <code className={typographyStyles.codeHeading}>
-              <h2>
-                unregister:{" "}
-                <span
-                  className={typographyStyles.typeText}
-                >{`(name: string | string[], options) => void`}</span>
-              </h2>
-            </code>
-
-            {api.unregister.description}
-
-            <h2 id="options" className={typographyStyles.subTitle}>
-              Options
-            </h2>
-
-            <div className={tableStyles.tableWrapper}>
-              <table className={tableStyles.table}>
-                <tbody>
-                  <tr>
-                    <th>{generic.name}</th>
-                    <th>{generic.type}</th>
-                    <th>{generic.description}</th>
-                    <th>{generic.codeExample}</th>
-                  </tr>
-                  <tr>
-                    <td>
-                      <code>keepDirty</code>
-                    </td>
-                    <td>
-                      <span className={typographyStyles.typeText}>boolean</span>
-                    </td>
-                    <td>
-                      <p>
-                        <code>isDirty</code> and <code>dirtyFields</code> will
-                        be remained during this action. However, this is not
-                        going to guarantee the next user input will not update{" "}
-                        <code>isDirty</code> formState, because{" "}
-                        <code>isDirty</code> is measured against the{" "}
-                        <code>defaultValues</code>.
-                      </p>
-                    </td>
-                    <td>
-                      <CodeArea
-                        withOutCopy
-                        rawData={`unregister('test',
-  { keepDirty: true }
-)`}
-                      />
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <code>keepTouched</code>
-                    </td>
-                    <td>
-                      <span className={typographyStyles.typeText}>boolean</span>
-                    </td>
-                    <td>
-                      <p>
-                        <code>touchedFields</code> will no longer remove that
-                        input after unregister.
-                      </p>
-                    </td>
-                    <td>
-                      <CodeArea
-                        withOutCopy
-                        rawData={`unregister('test',
-  { keepTouched: true }
-)`}
-                      />
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <code>keepIsValid</code>
-                    </td>
-                    <td>
-                      <span className={typographyStyles.typeText}>boolean</span>
-                    </td>
-                    <td>
-                      <p>
-                        <code>isValid</code> will be remained during this
-                        action. However, this is not going to guarantee the next
-                        user input will not update <code>isValid</code> for
-                        schema validation, you will have to adjust the schema
-                        according with the unregister.
-                      </p>
-                    </td>
-                    <td>
-                      <CodeArea
-                        withOutCopy
-                        rawData={`unregister('test',
-  { keepIsValid: true }
-)`}
-                      />
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <code>keepError</code>
-                    </td>
-                    <td>
-                      <span className={typographyStyles.typeText}>boolean</span>
-                    </td>
-                    <td>
-                      <code>errors</code> will not be updated.
-                    </td>
-                    <td>
-                      <CodeArea
-                        withOutCopy
-                        rawData={`unregister('test',
-  { keepError: true }
-)`}
-                      />
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <code>keepValue</code>
-                    </td>
-                    <td>
-                      <span className={typographyStyles.typeText}>boolean</span>
-                    </td>
-                    <td>
-                      input's current <code>value</code> will not be updated.
-                    </td>
-                    <td>
-                      <CodeArea
-                        withOutCopy
-                        rawData={`unregister('test',
-  { keepValue: true }
-)`}
-                      />
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <code>keepDefaultValue</code>
-                    </td>
-                    <td>
-                      <span className={typographyStyles.typeText}>boolean</span>
-                    </td>
-                    <td>
-                      input's <code>defaultValue</code> which defined in{" "}
-                      <code>useForm</code> will be remained.
-                    </td>
-                    <td>
-                      <CodeArea
-                        withOutCopy
-                        rawData={`unregister('test',
-  { keepDefaultValue: true }
-)`}
-                      />
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-
-            <h2 id="rules" className={typographyStyles.rulesTitle}>
-              Rules
-            </h2>
-
-            <ul>
-              <li>
-                <p>
-                  This method will remove input reference and its value, which
-                  means <b>built-in validation</b> rules will be removed as
-                  well.
-                </p>
-              </li>
-              <li>
-                <p>
-                  By <code>unregister</code> an input, it will not affect the
-                  schema validation.
-                </p>
-                <CodeArea
-                  rawData={`const schema = yup.object().shape({
-  firstName: yup.string().required()
-}).required();
-
-unregister("firstName"); // this will not remove the validation against firstName input
-`}
-                />
-              </li>
-              <li>
-                <p>
-                  Make sure you unmount that input which has{" "}
-                  <code>register</code> callback or else the input will get
-                  registered again.
-                </p>
-                <CodeArea
-                  rawData={`const [show, setShow] = React.useState(true)
-
-const onClick = () => {
-  unregister('test');
-  setShow(false); // make sure to unmount that input so register not invoked again.
-}
-
-{show && <input {...register('test')} />}`}
-                />
-              </li>
-            </ul>
-
-            <h2 id="example" className={typographyStyles.subTitle}>
-              Examples
-            </h2>
-
-            <CodeArea
-              url="https://codesandbox.io/s/react-hook-form-unregister-v6-forked-qs8o6"
-              rawData={unregisterCode}
-              tsUrl="https://codesandbox.io/s/react-hook-form-unregister-v6-ts-forked-4k2ey"
-              tsRawData={unregisterCodeTs}
-            />
-
-            <h2 className={typographyStyles.subTitle}>Video</h2>
-            <p>
-              The following video explain <code>unregister</code> API in detail.
-            </p>
-
-            <iframe
-              width="100%"
-              height="528"
-              title="react hook form controller build"
-              src="https://www.youtube.com/embed/TM99g_NW5Gk"
-              frameBorder="0"
-              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-              allowFullScreen
-            />
-
-            <StarRepo />
-          </section>
-
-          <Footer />
-        </main>
-      </div>
-    </div>
-  )
-}
-
-export default UnRegister
diff --git a/src/components/useForm/Watch.tsx b/src/components/useForm/Watch.tsx
deleted file mode 100644
index 6acf58295..000000000
--- a/src/components/useForm/Watch.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import Footer from "../Footer"
-import { Menu } from "../Menu"
-import api from "../../data/api"
-import typographyStyles from "../../styles/typography.module.css"
-import containerStyles from "../../styles/container.module.css"
-import ApiWatch from "../ApiWatch"
-
-const Watch = () => {
-  return (
-    <div className={containerStyles.container}>
-      <h1 className={typographyStyles.headingWithTopMargin} id="main">
-        watch
-      </h1>
-      <p className={typographyStyles.subHeading}>Subscribe to input changes</p>
-
-      <div className={containerStyles.wrapper}>
-        <Menu />
-
-        <main>
-          <ApiWatch api={api} />
-
-          <Footer />
-        </main>
-      </div>
-    </div>
-  )
-}
-
-export default Watch
diff --git a/src/components/useForm/resetField.tsx b/src/components/useForm/resetField.tsx
deleted file mode 100644
index ad683d3a0..000000000
--- a/src/components/useForm/resetField.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-import Footer from "../Footer"
-import { Menu } from "../Menu"
-import typographyStyles from "../../styles/typography.module.css"
-import containerStyles from "../../styles/container.module.css"
-import TabGroup from "../TabGroup"
-import CodeArea from "../CodeArea"
-import tableStyles from "../../styles/table.module.css"
-import generic from "../../data/generic"
-import resetFieldCode from "../codeExamples/resetFieldCode"
-import resetFieldOptionCode from "../codeExamples/resetFieldOptionCode"
-import StarRepo from "../StarRepo"
-
-export default function ResetField() {
-  return (
-    <div className={containerStyles.container}>
-      <h1 className={typographyStyles.headingWithTopMargin} id="main">
-        resetField
-      </h1>
-      <p className={typographyStyles.subHeading}>Reset field state and value</p>
-
-      <div className={containerStyles.wrapper}>
-        <Menu />
-
-        <main>
-          <section>
-            <code className={typographyStyles.codeHeading}>
-              <h2>
-                resetField:{" "}
-                <span
-                  className={typographyStyles.typeText}
-                >{`(name: string, options?: Record<string, boolean | any>) => void`}</span>
-              </h2>
-            </code>
-
-            <p>Reset an individual field state.</p>
-
-            <h2 className={typographyStyles.subTitle}>Props</h2>
-
-            <p>After invoke this function.</p>
-
-            <ul>
-              <li>
-                <p>
-                  <code>isValid</code> form state will be reevaluated.
-                </p>
-              </li>
-              <li>
-                <p>
-                  <code>isDirty</code> form state will be reevaluated.
-                </p>
-              </li>
-            </ul>
-
-            <p>
-              <code>ResetField</code> has the ability to retain field state.
-              Here are the options you may want to use:{" "}
-            </p>
-
-            <div className={tableStyles.tableWrapper}>
-              <table className={tableStyles.table}>
-                <thead>
-                  <tr>
-                    <th>{generic.name}</th>
-                    <th></th>
-                    <th>{generic.type}</th>
-                    <th>{generic.description}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td>
-                      <code>name</code>
-                    </td>
-                    <td></td>
-                    <td>
-                      <code className={typographyStyles.typeText}>string</code>
-                    </td>
-                    <td>
-                      <p>registered field name.</p>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>options</td>
-                    <td>
-                      <code>keepError</code>
-                    </td>
-                    <td>
-                      <code className={typographyStyles.typeText}>boolean</code>
-                    </td>
-                    <td>
-                      <p>
-                        When set to <code>true</code>, field error will be
-                        retained.
-                      </p>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td></td>
-                    <td>
-                      <code>keepDirty</code>
-                    </td>
-                    <td>
-                      <code className={typographyStyles.typeText}>boolean</code>
-                    </td>
-                    <td>
-                      <p>
-                        When set to <code>true</code>, <code>dirtyFields</code>{" "}
-                        will be retained.
-                      </p>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td></td>
-                    <td>
-                      <code>keepTouched</code>
-                    </td>
-                    <td>
-                      <code className={typographyStyles.typeText}>boolean</code>
-                    </td>
-                    <td>
-                      <p>
-                        When set to <code>true</code>,{" "}
-                        <code>touchedFields</code> state will be unchanged.
-                      </p>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td></td>
-                    <td>
-                      <code>defaultValue</code>
-                    </td>
-                    <td>
-                      <code className={typographyStyles.typeText}>unknown</code>
-                    </td>
-                    <td>
-                      <p>
-                        When this value is <b>not</b> provided, field will be
-                        revert back to it's defaultValue.
-                      </p>
-
-                      <p>When this value is provided:</p>
-                      <ol>
-                        <li>
-                          <p>field will be updated with the supplied value.</p>
-                        </li>
-                        <li>
-                          <p>
-                            field's <code>defaultValue</code> will be updated to
-                            this value.
-                          </p>
-                        </li>
-                      </ol>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-
-            <h2 id="rules" className={typographyStyles.rulesTitle}>
-              Rules
-            </h2>
-
-            <ul>
-              <li>
-                <p>name need to match registered field name.</p>
-
-                <CodeArea
-                  rawData={`register('test');
-
-resetField('test'); // ✅ register input and resetField works
-resetField('non-existent-name'); // ❌ failed by input not found
-`}
-                />
-              </li>
-            </ul>
-
-            <h2 id="example" className={typographyStyles.subTitle}>
-              Examples
-            </h2>
-
-            <TabGroup
-              buttonLabels={["Reset Field State", "Reset With Options"]}
-            >
-              <CodeArea
-                rawData={resetFieldCode}
-                url="https://codesandbox.io/s/priceless-firefly-d0kuv"
-              />
-              <CodeArea
-                rawData={resetFieldOptionCode}
-                url="https://codesandbox.io/s/resetfield-with-options-iw4wd"
-              />
-            </TabGroup>
-
-            <h2 className={typographyStyles.subTitle}>Video</h2>
-
-            <p>
-              The following video tutorial demonstrates <code>resetField</code>{" "}
-              API.
-            </p>
-
-            <iframe
-              width="100%"
-              height="528"
-              title="react hook form controller build"
-              src="https://www.youtube.com/embed/IdLFcNaEFEo"
-              frameBorder="0"
-              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-              allowFullScreen
-            />
-
-            <StarRepo />
-          </section>
-
-          <Footer />
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/utils/useWindowSize.ts b/src/components/utils/useWindowSize.ts
index 97067389d..990f3abb9 100644
--- a/src/components/utils/useWindowSize.ts
+++ b/src/components/utils/useWindowSize.ts
@@ -21,8 +21,6 @@ export default function useWindowSize(): Size {
 
     window.addEventListener("resize", handleResize)
 
-    handleResize()
-
     return () => window.removeEventListener("resize", handleResize)
   }, [])
 
diff --git a/src/content/clear-errors.mdx b/src/content/clear-errors.mdx
new file mode 100644
index 000000000..d8a4924a7
--- /dev/null
+++ b/src/content/clear-errors.mdx
@@ -0,0 +1,121 @@
+## \</> `clearErrors:` <TypeText>(name?: string | string[]) => void</TypeText>
+
+This function can manually clear errors in the form.
+
+### Props
+
+---
+
+| Type                           | Description             | Example                                 |
+| ------------------------------ | ----------------------- | --------------------------------------- |
+| <TypeText>undefined</TypeText> | Remove all errors.      | `clearErrors()`                         |
+| <TypeText>string</TypeText>    | Remove single error.    | `clearErrors("yourDetails.firstName")`  |
+| <TypeText>string[]</TypeText>  | Remove multiple errors. | `clearErrors(["yourDetails.lastName"])` |
+
+- `undefined`: reset all errors
+- `string`: reset the error on a single field or by key name.
+
+  ```javascript
+  register("test.firstName", { required: true })
+  register("test.lastName", { required: true })
+  clearErrors("test") // will clear both errors from test.firstName and test.lastName
+  clearErrors("test.firstName") // for clear single input error
+  ```
+
+- `string[]`: reset errors on the given fields
+
+<Admonition type="important" title="Rules">
+
+- This will not affect the validation rules attached to each inputs.
+- This method doesn't affect validation rules or `isValid` formState.
+
+</Admonition>
+
+**Examples**
+
+---
+
+<TabGroup buttonLabels={["TS", "JS"]}>
+
+```typescript sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-clearerrors-w3ymx"
+import * as React from "react"
+import { useForm } from "react-hook-form"
+
+type FormInputs = {
+  firstName: string
+  lastName: string
+  username: string
+}
+
+const App = () => {
+  const {
+    register,
+    formState: { errors },
+    handleSubmit,
+    clearErrors,
+  } = useForm<FormInputs>()
+
+  const onSubmit = (data: FormInputs) => {
+    console.log(data)
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register("firstName", { required: true })} />
+      <input {...register("lastName", { required: true })} />
+      <input {...register("username", { required: true })} />
+      <button type="button" onClick={() => clearErrors("firstName")}>
+        Clear First Name Errors
+      </button>
+      <button
+        type="button"
+        onClick={() => clearErrors(["firstName", "lastName"])}
+      >
+        Clear First and Last Name Errors
+      </button>
+      <button type="button" onClick={() => clearErrors()}>
+        Clear All Errors
+      </button>
+      <input type="submit" />
+    </form>
+  )
+}
+```
+
+```javascript sandbox="https://codesandbox.io/s/react-hook-form-v7-clearerrors-w5tl6"
+import * as React from "react"
+import { useForm } from "react-hook-form"
+
+const App = () => {
+  const {
+    register,
+    formState: { errors },
+    handleSubmit,
+    clearErrors,
+  } = useForm()
+  const onSubmit = (data) => console.log(data)
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register("firstName", { required: true })} />
+      <input {...register("lastName", { required: true })} />
+      <input {...register("username", { required: true })} />
+      <button type="button" onClick={() => clearErrors("firstName")}>
+        Clear First Name Errors
+      </button>
+      <button
+        type="button"
+        onClick={() => clearErrors(["firstName", "lastName"])}
+      >
+        Clear First and Last Name Errors
+      </button>
+      <button type="button" onClick={() => clearErrors()}>
+        Clear All Errors
+      </button>
+      <input type="submit" />
+    </form>
+  )
+}
+```
+
+</TabGroup>
diff --git a/src/content/control.mdx b/src/content/control.mdx
new file mode 100644
index 000000000..cf4212271
--- /dev/null
+++ b/src/content/control.mdx
@@ -0,0 +1,62 @@
+## \</> `control:` <TypeText>Object</TypeText>
+
+This object contains methods for registering components into React Hook Form.
+
+<Admonition type="important" title="Rules">
+
+**Important:** do not access any of the properties inside this object directly. It's for internal usage only.
+
+</Admonition>
+
+**Examples:**
+
+---
+
+<TabGroup buttonLabels={["TS", "JS"]}>
+
+```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
+import React from "react"
+import { useForm, Controller } from "react-hook-form"
+import { TextField } from "@material-ui/core"
+
+type FormInputs = {
+  firstName: string
+}
+
+function App() {
+  const { control, handleSubmit } = useForm<FormInputs>()
+  const onSubmit = (data: FormInputs) => console.log(data)
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        as={TextField}
+        name="firstName"
+        control={control}
+        defaultValue=""
+      />
+
+      <input type="submit" />
+    </form>
+  )
+}
+```
+
+```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5"
+import { useForm, Controller } from "react-hook-form"
+
+function App() {
+  const { control } = useForm()
+
+  return (
+    <Controller
+      render={({ field }) => <input {...field} />}
+      name="firstName"
+      control={control}
+      defaultValue=""
+    />
+  )
+}
+```
+
+</TabGroup>
diff --git a/src/content/controller.mdx b/src/content/controller.mdx
new file mode 100644
index 000000000..bf18ed544
--- /dev/null
+++ b/src/content/controller.mdx
@@ -0,0 +1,228 @@
+## \</> `Controller`: <TypeText>Component</TypeText>
+
+React Hook Form embraces uncontrolled components and native inputs, however it's hard to avoid working with external controlled component such as [React-Select](https://github.com/JedWatson/react-select), [AntD](https://github.com/ant-design/ant-design) and [MUI](https://mui.com/). This wrapper component will make it easier for you to work with them.
+
+### Props
+
+---
+
+The following table contains information about the arguments for `Controller`.
+
+| Name               | Type                                                               | Required | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| ------------------ | ------------------------------------------------------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `name`             | <TypeText>[`FieldPath`](/ts#FieldPath "FieldPath type")</TypeText> | ✓        | Unique name of your input.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| control            | <TypeText>[`Control`](/ts#Control "Control type")</TypeText>       |          | [`control`](/docs/useform/control) object is from invoking `useForm`. Optional when using `FormProvider`.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `render`           | <TypeText>Function</TypeText>                                      |          | This is a [render prop](https://reactjs.org/docs/render-props.html). A function that returns a React element and provides the ability to attach events and value into the component. This simplifies integrating with external controlled components with non-standard prop names. Provides `onChange`, `onBlur`, `name`, `ref` and `value` to the child component, and also a `fieldState` object which contains specific input state.                                                                    |
+| `defaultValue`     | <TypeText>unknown</TypeText>                                       |          | **Important:** Can not apply `undefined` to `defaultValue` or `defaultValues` at `useForm`. <ul><li>You need to either set `defaultValue` at the field-level or `useForm`'s `defaultValues`. `undefined` is not a valid value.</li><li>If your form will invoke `reset` with default values, you will need to provide `useForm` with `defaultValues`.</li><li>Calling `onChange` with `undefined` is not valid. You should use `null` or the empty string as your default/cleared value instead.</li></ul> |
+| `rules`            | <TypeText>Object</TypeText>                                        |          | Validation rules in the same format for [`register` options](/docs/useform/register#options), which includes:<br/><br/>required, min, max, minLength, maxLength, pattern, validate                                                                                                                                                                                                                                                                                                                         |
+| `shouldUnregister` | <TypeText>boolean = false`</TypeText>                              |          | Input will be unregistered after unmount and defaultValues will be removed as well.<br/><br/>**Note:** this prop should be avoided when using with `useFieldArray` as `unregister` function gets called after input unmount/remount and reorder.                                                                                                                                                                                                                                                           |
+
+### Return
+
+---
+
+The following table contains information about properties which `Controller` produces.
+
+| Object Name                            | Name                 | Type                                        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| -------------------------------------- | -------------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `field`                                | `onChange`           | <TypeText>`(value: any) => void`</TypeText> | A function which sends the input's value to the library.<br/><br/>_ It should be assigned to the `onChange` prop of the input and value should **not be `undefined`**.<br/>_ This prop update [formState](/docs/useform/formstate) and you should avoid manually invoke [setValue](/docs/useform/setvalue) or other API related to field update.                                                                                                                                                                                                               |
+| `field`                                | `onBlur`             | <TypeText>`() => void`</TypeText>           | A function which sends the input's onBlur event to the library. It should be assigned to the input's `onBlur` prop.                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `field`                                | `value`              | <TypeText>unknown</TypeText>                | The current value of the controlled component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `field`                                | `name`               | <TypeText>string</TypeText>                 | Input's name being registered.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `field`                                | `ref`                | <TypeText>React.ref</TypeText>              | A ref used to connect hook form to the input. Assign `ref` to component's input ref to allow hook form to focus the error input.                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `fieldState`                           | `invalid`            | <TypeText>boolean</TypeText>                | Invalid state for current input.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `fieldState`                           | `isTouched`          | <TypeText>boolean</TypeText>                | Touched state for current controlled input.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `fieldState`                           | `isDirty`            | <TypeText>boolean</TypeText>                | Dirty state for current controlled input.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `fieldState`                           | `error`              | <TypeText>object</TypeText>                 | error for this specific input.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| [`formState`](/docs/useform/formstate) | `isDirty`            | <TypeText>boolean</TypeText>                | Set to `true` after the user modifies any of the inputs. <ol><li>**Important:** Make sure to provide all inputs' defaultValues at the useForm, so hook form can have a single source of truth to compare whether the form is dirty.</li><li>File typed input will need to be managed at the app level due to the ability to cancel file selection and [FileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList) object.</li></ol>                                                                                                                  |
+| `formState`                            | `dirtyFields`        | <TypeText>object</TypeText>                 | An object with the user-modified fields. Make sure to provide all inputs' defaultValues via useForm, so the library can compare against the `defaultValues` <ol><li>**Important:** Make sure to provide defaultValues at the useForm, so hook form can have a single source of truth to compare each field's dirtiness.</li><li>Dirty fields will **not** represent as `isDirty` formState, because dirty fields are marked field dirty at field level rather the entire form. If you want to determine the entire form state use `isDirty` instead.</li></ol> |
+| `formState`                            | `touchedFields`      | <TypeText>object</TypeText>                 | An object containing all the inputs the user has interacted with.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| `formState`                            | `defaultValues`      | <TypeText>object</TypeText>                 | The value which has been set at [useForm](/docs/useform)'s defaultValues or updated defaultValues via [reset](/docs/useform/reset) API.                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `formState`                            | `isSubmitted`        | <TypeText>boolean</TypeText>                | Set to `true` after the form is submitted. Will remain `true` until the `reset` method is invoked.                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `formState`                            | `isSubmitSuccessful` | <TypeText>boolean</TypeText>                | Indicate the form was successfully submitted without any runtime error.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `formState`                            | `isSubmitting`       | <TypeText>boolean</TypeText>                | `true` if the form is currently being submitted. `false` otherwise.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `formState`                            | `isLoading`          | <TypeText>boolean</TypeText>                | `true` if the form is currently loading async default values.<br/>**Important:** this prop is only applicable to async `defaultValues`                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| `formState`                            | `submitCount`        | <TypeText>number</TypeText>                 | Number of times the form was submitted.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `formState`                            | `isValid`            | <TypeText>boolean</TypeText>                | Set to `true` if the form doesn't have any errors.<br/><br/>`setError` has no effect on `isValid` formState, `isValid` will always derived via the entire form validation result.                                                                                                                                                                                                                                                                                                                                                                              |
+| `formState`                            | `isValidating`       | <TypeText>boolean</TypeText>                | Set to `true` during validation.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `formState`                            | `errors`             | <TypeText>object</TypeText>                 | An object with field errors. There is also an [ErrorMessage](/docs/useformstate/errormessage) component to retrieve error message easily.                                                                                                                                                                                                                                                                                                                                                                                                                      |
+
+**Examples:**
+
+---
+
+**Web**
+
+<TabGroup buttonLabels={["TS", "JS"]}>
+
+```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
+import ReactDatePicker from "react-datepicker"
+import { TextField } from "@material-ui/core"
+import { useForm, Controller } from "react-hook-form"
+
+type FormValues = {
+  ReactDatepicker: string
+}
+
+function App() {
+  const { handleSubmit, control } = useForm<FormValues>()
+
+  return (
+    <form onSubmit={handleSubmit((data) => console.log(data))}>
+      <Controller
+        control={control}
+        name="ReactDatepicker"
+        render={({ field: { onChange, onBlur, value, ref } }) => (
+          <ReactDatePicker
+            onChange={onChange} // send value to hook form
+            onBlur={onBlur} // notify when input is touched/blur
+            selected={value}
+          />
+        )}
+      />
+
+      <input type="submit" />
+    </form>
+  )
+}
+```
+
+```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5"
+import React from "react"
+import ReactDatePicker from "react-datepicker"
+import { TextField } from "@material-ui/core"
+import { useForm, Controller } from "react-hook-form"
+
+function App() {
+  const { handleSubmit, control } = useForm()
+
+  return (
+    <form onSubmit={handleSubmit((data) => console.log(data))}>
+      <Controller
+        control={control}
+        name="ReactDatepicker"
+        render={({ field: { onChange, onBlur, value, ref } }) => (
+          <ReactDatePicker
+            onChange={onChange}
+            onBlur={onBlur}
+            selected={value}
+          />
+        )}
+      />
+
+      <input type="submit" />
+    </form>
+  )
+}
+```
+
+</TabGroup>
+
+**React Native**
+
+```javascript copy sandbox="https://snack.expo.io/@bluebill1049/react-hook-form-v7---controller" expo
+import { Text, View, TextInput, Button, Alert } from "react-native"
+import { useForm, Controller } from "react-hook-form"
+
+export default function App() {
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+    },
+  })
+  const onSubmit = (data) => console.log(data)
+
+  return (
+    <View>
+      <Controller
+        control={control}
+        rules={{
+          required: true,
+        }}
+        render={({ field: { onChange, onBlur, value } }) => (
+          <TextInput
+            placeholder="First name"
+            onBlur={onBlur}
+            onChangeText={onChange}
+            value={value}
+          />
+        )}
+        name="firstName"
+      />
+      {errors.firstName && <Text>This is required.</Text>}
+
+      <Controller
+        control={control}
+        rules={{
+          maxLength: 100,
+        }}
+        render={({ field: { onChange, onBlur, value } }) => (
+          <TextInput
+            placeholder="Last name"
+            onBlur={onBlur}
+            onChangeText={onChange}
+            value={value}
+          />
+        )}
+        name="lastName"
+      />
+
+      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
+    </View>
+  )
+}
+```
+
+### Video
+
+---
+
+The following video showcases what's inside Controller and how its been built.
+
+<YouTube youTubeId="N2UNk_UCVyA" />
+
+<Admonition type="tip" >
+
+- It's important to be aware of each prop's responsibility when working with external controlled components, such as MUI, AntD, Chakra UI. Controller acts as a "spy" on your input by reporting and setting value.
+  - **onChange**: send data back to hook form
+  - **onBlur**: report input has been interacted (focus and blur)
+  - **value**: set up input initial and updated value
+  - **ref**: allow input to be focused with error
+  - **name**: give input an unique name
+    The following codesandbox demonstrate the usages:
+  - [MUI and other components](https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5)
+  - [Chakra UI components](https://codesandbox.io/s/chakra-ui-5mp8g)
+- Do not `register` input again. This component is made to take care of the registration process.
+
+  ```javascript
+  <Controller
+    name="test"
+    render={({ field }) => {
+      // return <input {...field} {...register('test')} />; ❌ double up the registration
+      return <input {...field} /> // ✅
+    }}
+  />
+  ```
+
+- Customise what value gets sent to hook form by transforming the value during `onChange`.
+  ```javascript
+  <Controller
+    name="test"
+    render={({ field }) => {
+      // sending integer instead of string.
+      return (
+        <input
+          {...field}
+          onChange={(e) => field.onChange(parseInt(e.target.value))}
+        />
+      )
+    }}
+  />
+  ```
+
+</Admonition>
diff --git a/src/content/handle-submit.mdx b/src/content/handle-submit.mdx
new file mode 100644
index 000000000..724943218
--- /dev/null
+++ b/src/content/handle-submit.mdx
@@ -0,0 +1,133 @@
+## \</> `handleSubmit:` <TypeText>`((data: Object, e?: Event) => Promise<void>, (errors: Object, e?: Event) => void) => Promise<void>`</TypeText>
+
+This function will receive the form data if form validation is successful.
+
+### Props
+
+---
+
+| Name               | Type                                                                | Description            |
+| ------------------ | ------------------------------------------------------------------- | ---------------------- |
+| SubmitHandler      | <TypeText>`(data: Object, e?: Event) => Promise<void>`</TypeText>   | A successful callback. |
+| SubmitErrorHandler | <TypeText>`(errors: Object, e?: Event) => Promise<void>`</TypeText> | An error callback.     |
+
+<Admonition type="important" title="Rules">
+
+- You can easily submit form asynchronously with handleSubmit.
+
+  ```javascript copy
+  handleSubmit(onSubmit)()
+
+  // You can pass an async function for asynchronous validation.
+  handleSubmit(async (data) => await fetchAPI(data))
+  ```
+
+- `disabled` inputs will appear as `undefined` values in form values. If you want to prevent users from updating an input and wish to retain the form value, you can use `readOnly` or disable the entire &lt;fieldset /&gt;. Here is an [example](https://codesandbox.io/s/react-hook-form-disabled-inputs-oihxx).
+- `handleSubmit` function will not swallow errors that occurred inside your onSubmit callback, so we recommend you to try and catch inside async request and handle those errors gracefully for your customers.
+
+  ```javascript
+  const onSubmit = async () => {
+    // async request which may result error
+    try {
+      // await fetch()
+    } catch (e) {
+      // handle your error
+    }
+  }
+
+  ;<form onSubmit={handleSubmit(onSubmit)} />
+  ```
+
+</Admonition>
+
+**Examples:**
+
+---
+
+**Sync**
+
+<TabGroup buttonLabels={["TS", "JS"]}>
+
+```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-lcrtu"
+import React from "react"
+import { useForm, SubmitHandler } from "react-hook-form"
+
+type FormValues = {
+  firstName: string
+  lastName: string
+  email: string
+}
+
+export default function App() {
+  const { register, handleSubmit } = useForm<FormValues>()
+  const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data)
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register("firstName")} />
+      <input {...register("lastName")} />
+      <input type="email" {...register("email")} />
+
+      <input type="submit" />
+    </form>
+  )
+}
+```
+
+```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-handlesubmit-v7-uqmiy"
+import { useForm } from "react-hook-form"
+
+export default function App() {
+  const { register, handleSubmit } = useForm()
+  const onSubmit = (data, e) => console.log(data, e)
+  const onError = (errors, e) => console.log(errors, e)
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit, onError)}>
+      <input {...register("firstName")} />
+      <input {...register("lastName")} />
+      <button type="submit">Submit</button>
+    </form>
+  )
+}
+```
+
+</TabGroup>
+
+**Async**
+
+```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-async-submit-validation-kpx0o"
+import React from "react";
+import { useForm } from "react-hook-form";
+
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+function App() {
+  const { register, handleSubmit, formState: { errors }, formState } = useForm();
+  const onSubmit = async data => {
+    await sleep(2000);
+    if (data.username === "bill") {
+      alert(JSON.stringify(data));
+    } else {
+      alert("There is an error");
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <label htmlFor="username">User Name</label>
+      <input placeholder="Bill" {...register("username"} />
+
+      <input type="submit" />
+    </form>
+  );
+}
+```
+
+### Video
+
+---
+
+The following video tutorial explains the `handleSubmit` API in detail.
+
+<YouTube youTubeId="KzcPKB9SOEk" />
diff --git a/src/content/reset-field.mdx b/src/content/reset-field.mdx
new file mode 100644
index 000000000..2a0f3a1f2
--- /dev/null
+++ b/src/content/reset-field.mdx
@@ -0,0 +1,139 @@
+## \</> `resetField:` <TypeText>`(name: string, options?: Record<string, boolean | any>) => void`</TypeText>
+
+Reset an individual field state.
+
+### Props
+
+---
+
+After invoke this function.
+
+- `isValid` form state will be reevaluated.
+- `isDirty` form state will be reevaluated.
+
+`ResetField` has the ability to retain field state. Here are the options you may want to use:
+
+| Name    |                | Type                         | Description                                                                                                                                                                                                                                               |
+| ------- | -------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `name`  |                | <TypeText>string</TypeText>  | registered field name.                                                                                                                                                                                                                                    |
+| options | `keepError`    | <TypeText>boolean</TypeText> | When set to `true`, field error will be retained.                                                                                                                                                                                                         |
+|         | `keepDirty`    | <TypeText>boolean</TypeText> | When set to `true`, `dirtyFields` will be retained.                                                                                                                                                                                                       |
+|         | `keepTouched`  | <TypeText>boolean</TypeText> | When set to `true`, `touchedFields` state will be unchanged.                                                                                                                                                                                              |
+|         | `defaultValue` | <TypeText>unknown</TypeText> | When this value is **not** provided, field will be revert back to it's defaultValue.<br/>When this value is provided:<br/><ul><li>field will be updated with the supplied value</li> <li>field's `defaultValue` will be updated to this value.</li> </ul> |
+
+<Admonition type="important" title="Rules">
+
+- name need to match registered field name.
+
+  ```javascript
+  register("test")
+  resetField("test") // ✅ register input and resetField works
+  resetField("non-existent-name") // ❌ failed by input not found
+  ```
+
+</Admonition>
+
+**Examples:**
+
+---
+
+**Reset Field State**
+
+```javascript copy sandbox="https://codesandbox.io/s/priceless-firefly-d0kuv"
+import * as React from "react"
+import { useForm } from "react-hook-form"
+
+export default function App() {
+  const {
+    register,
+    resetField,
+    formState: { isDirty, isValid },
+  } = useForm({
+    mode: "onChange",
+    defaultValues: {
+      firstName: "",
+    },
+  })
+  const handleClick = () => resetField("firstName")
+
+  return (
+    <form>
+      <input {...register("firstName", { required: true })} />
+
+      <p>{isDirty && "dirty"}</p>
+      <p>{isValid && "valid"}</p>
+
+      <button type="button" onClick={handleClick}>
+        Reset
+      </button>
+    </form>
+  )
+}
+```
+
+**Reset With Options**
+
+```javascript copy sandbox="https://codesandbox.io/s/resetfield-with-options-iw4wd"
+import * as React from "react"
+import { useForm } from "react-hook-form"
+
+export default function App() {
+  const {
+    register,
+    resetField,
+    formState: { isDirty, isValid, errors, touchedFields, dirtyFields },
+  } = useForm({
+    mode: "onChange",
+    defaultValues: {
+      firstName: "",
+    },
+  })
+
+  return (
+    <form>
+      <input {...register("firstName", { required: true })} />
+
+      <p>isDirty: {isDirty && "dirty"}</p>
+      <p>touchedFields: {touchedFields.firstName && "touched field"}</p>
+      <p>dirtyFields:{dirtyFields.firstName && "dirty field"}</p>
+      <p>isValid: {isValid && "valid"}</p>
+      <p>error: {errors.firstName && "error"}</p>
+
+      <hr />
+
+      <button
+        type="button"
+        onClick={() => resetField("firstName", { keepError: true })}
+      >
+        Reset keep error
+      </button>
+      <button
+        type="button"
+        onClick={() => resetField("firstName", { keepTouched: true })}
+      >
+        Reset keep touched fields
+      </button>
+      <button
+        type="button"
+        onClick={() => resetField("firstName", { keepDirty: true })}
+      >
+        Reset keep dirty fields
+      </button>
+      <button
+        type="button"
+        onClick={() => resetField("firstName", { defaultValue: "New" })}
+      >
+        update defaultValue
+      </button>
+    </form>
+  )
+}
+```
+
+### Video
+
+---
+
+The following video tutorial demonstrates `resetField` API.
+
+<YouTube youTubeId="IdLFcNaEFEo" />
diff --git a/src/content/reset.mdx b/src/content/reset.mdx
new file mode 100644
index 000000000..67e4de214
--- /dev/null
+++ b/src/content/reset.mdx
@@ -0,0 +1,330 @@
+## \</> `reset:` <TypeText>`<T>(values?: T | ResetAction<T>, options?: Record<string, boolean>) => void`</TypeText>
+
+Reset the entire form state, fields reference, and subscriptions. There are optional arguments and will allow partial form state reset.
+
+### Props
+
+---
+
+`Reset` has the ability to retain formState. Here are the options you may use:
+
+| Name                | Type                         | Description                                                                                                                                                                                                                                                                                                                                                                                                         |
+| ------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `values`            | <TypeText>object</TypeText>  | An optional object to reset form values, and it's recommended to provide the **entire** defaultValues when supplied.                                                                                                                                                                                                                                                                                                |
+| `keepErrors`        | <TypeText>boolean</TypeText> | All errors will remain. This will not guarantee with further user actions.                                                                                                                                                                                                                                                                                                                                          |
+| `keepDirty`         | <TypeText>boolean</TypeText> | `DirtyFields` form state will remain, and `isDirty` will temporarily remain as the current state until further user's action.<br/><br/>**Important:** this keep option doesn't reflect form input values but only dirty fields form state.                                                                                                                                                                          |
+| `keepDirtyValues`   | <TypeText>boolean</TypeText> | `DirtyFields` and `isDirty` will remained, and only none dirty fields will be updated to the latest rest value. [Check out the example.](https://codesandbox.io/s/react-keepdirtyvalues-o8to91)<br/><br/>**Important:** formState `dirtyFields` will need to be subscribed.                                                                                                                                         |
+| `keepValues`        | <TypeText>boolean</TypeText> | Form input values will be unchanged.                                                                                                                                                                                                                                                                                                                                                                                |
+| `keepDefaultValues` | <TypeText>boolean</TypeText> | Keep the same defaultValues which are initialised via `useForm`.<ul><li>`isDirty` will be checked again: it is set to be the result of the comparison of any new values provided against the original `defaultValues`.</li> <li>`dirtyFields` will be updated again if values are provided: it is set to be result of the comparison between the new values provided against the original`defaultValues`.</li></ul> |
+| `keepIsSubmitted`   | <TypeText>boolean</TypeText> | `isSubmitted` state will be unchanged.                                                                                                                                                                                                                                                                                                                                                                              |
+| `keepTouched`       | <TypeText>boolean</TypeText> | `isTouched` state will be unchanged.                                                                                                                                                                                                                                                                                                                                                                                |
+| `keepIsValid`       | <TypeText>boolean</TypeText> | `isValid` will temporarily persist as the current state until additional user actions.                                                                                                                                                                                                                                                                                                                              |
+| `keepSubmitCount`   | <TypeText>boolean</TypeText> | `submitCount` state will be unchanged.                                                                                                                                                                                                                                                                                                                                                                              |
+
+<Admonition type="important" title="Rules">
+
+- For controlled components you will need to pass `defaultValues` to `useForm` in order to `reset` the `Controller` components' value.
+- When `defaultValues` is not supplied to `reset` API, then HTML native [reset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset) API will be invoked to restore the form.
+- Avoid calling `reset` before `useForm`'s `useEffect` is invoked, this is because `useForm`'s subscription needs to be ready before `reset` can send a signal to flush form state update.
+- It's recommended to `reset` inside `useEffect` after submission.
+  ```javascript
+  useEffect(() => {
+    reset({
+      data: "test",
+    })
+  }, [isSubmitSuccessful])
+  ```
+
+</Admonition>
+
+**Examples:**
+
+---
+
+**Uncontrolled**
+
+<TabGroup buttonLabels={["TS", "JS"]}>
+
+```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-reset-v7-ts-pu901"
+import { useForm } from "react-hook-form"
+
+interface UseFormInputs {
+  firstName: string
+  lastName: string
+}
+
+export default function Form() {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<UseFormInputs>()
+  const onSubmit = (data: UseFormInputs) => {
+    console.log(data)
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <label>First name</label>
+      <input {...register("firstName", { required: true })} />
+
+      <label>Last name</label>
+      <input {...register("lastName")} />
+
+      <input type="submit" />
+      <input type="reset" value="Standard Reset Field Values" />
+      <input
+        type="button"
+        onClick={() => reset()}
+        value="Custom Reset Field Values & Errors"
+      />
+    </form>
+  )
+}
+```
+
+```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-reset-v7-r7m5s"
+import React, { useCallback } from "react"
+import { useForm } from "react-hook-form"
+
+export default function App() {
+  const { register, handleSubmit, reset } = useForm()
+  const resetAsyncForm = useCallback(async () => {
+    const result = await fetch("./api/formValues.json") // result: { firstName: 'test', lastName: 'test2' }
+    reset(result) // asynchronously reset your form values
+  }, [reset])
+
+  useEffect(() => {
+    resetAsyncForm()
+  }, [resetAsyncForm])
+
+  return (
+    <form onSubmit={handleSubmit((data) => {})}>
+      <input {...register("firstName")} />
+      <input {...register("lastName")} />
+
+      <input
+        type="button"
+        onClick={() => {
+          reset(
+            {
+              firstName: "bill",
+            },
+            {
+              keepErrors: true,
+              keepDirty: true,
+            }
+          )
+        }}
+      />
+
+      <button
+        onClick={() => {
+          reset((formValues) => ({
+            ...formValues,
+            lastName: "test",
+          }))
+        }}
+      >
+        Reset partial
+      </button>
+    </form>
+  )
+}
+```
+
+</TabGroup>
+
+**Controller**
+
+<TabGroup buttonLabels={["TS", "JS"]}>
+
+```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
+import React from "react"
+import { useForm, Controller } from "react-hook-form"
+import { TextField } from "@material-ui/core"
+
+interface IFormInputs {
+  firstName: string
+  lastName: string
+}
+
+export default function App() {
+  const { register, handleSubmit, reset, setValue, control } =
+    useForm<IFormInputs>()
+  const onSubmit = (data: IFormInputs) => console.log(data)
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        render={({ field }) => <TextField {...field} />}
+        name="firstName"
+        control={control}
+        rules={{ required: true }}
+        defaultValue=""
+      />
+      <Controller
+        render={({ field }) => <TextField {...field} />}
+        name="lastName"
+        control={control}
+        defaultValue=""
+      />
+
+      <input type="submit" />
+      <input type="button" onClick={reset} />
+      <input
+        type="button"
+        onClick={() => {
+          reset({
+            firstName: "bill",
+            lastName: "luo",
+          })
+        }}
+      />
+    </form>
+  )
+}
+```
+
+```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5"
+import { useForm, Controller } from "react-hook-form"
+import { TextField } from "@material-ui/core"
+
+export default function App() {
+  const { register, handleSubmit, reset, setValue, control } = useForm()
+  const onSubmit = (data) => console.log(data)
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        render={({ field }) => <TextField {...field} />}
+        name="firstName"
+        control={control}
+        rules={{ required: true }}
+        defaultValue=""
+      />
+      <Controller
+        render={({ field }) => <TextField {...field} />}
+        name="lastName"
+        control={control}
+        defaultValue=""
+      />
+
+      <input type="submit" />
+      <input type="button" onClick={reset} />
+      <input
+        type="button"
+        onClick={() => {
+          reset({
+            firstName: "bill",
+            lastName: "luo",
+          })
+        }}
+      />
+    </form>
+  )
+}
+```
+
+</TabGroup>
+
+**Submit with Reset**
+
+```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-handlesubmit-with-reset-xu1zu"
+import { useForm, useFieldArray, Controller } from "react-hook-form"
+
+function App() {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState,
+    formState: { isSubmitSuccessful },
+  } = useForm({ defaultValues: { something: "anything" } })
+
+  const onSubmit = (data) => {
+    // It's recommended to reset in useEffect as execution order matters
+    // reset({ ...data })
+  }
+
+  React.useEffect(() => {
+    if (formState.isSubmitSuccessful) {
+      reset({ something: "" })
+    }
+  }, [formState, submittedData, reset])
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register("something")} />
+      <input type="submit" />
+    </form>
+  )
+}
+```
+
+**Field Array**
+
+```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-reset-usefieldarray-forked-kdh2s"
+import React, { useEffect } from "react"
+import { useForm, useFieldArray, Controller } from "react-hook-form"
+
+function App() {
+  const { register, control, handleSubmit, reset } = useForm({
+    defaultValues: {
+      loadState: "unloaded",
+      names: [{ firstName: "Bill", lastName: "Luo" }],
+    },
+  })
+  const { fields, remove } = useFieldArray({
+    control,
+    name: "names",
+  })
+
+  useEffect(() => {
+    reset({
+      names: [
+        {
+          firstName: "Bob",
+          lastName: "Actually",
+        },
+        {
+          firstName: "Jane",
+          lastName: "Actually",
+        },
+      ],
+    })
+  }, [reset])
+
+  const onSubmit = (data) => console.log("data", data)
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <ul>
+        {fields.map((item, index) => (
+          <li key={item.id}>
+            <input {...register(`names.${index}.firstName`)} />
+
+            <Controller
+              render={({ field }) => <input {...field} />}
+              name={`names.${index}.lastName`}
+              control={control}
+            />
+            <button type="button" onClick={() => remove(index)}>
+              Delete
+            </button>
+          </li>
+        ))}
+      </ul>
+
+      <input type="submit" />
+    </form>
+  )
+}
+```
+
+### Videos
+
+---
+
+<YouTube youTubeId="qmCLBjyPwVk" />
diff --git a/src/content/set-focus.mdx b/src/content/set-focus.mdx
new file mode 100644
index 000000000..efc3e77fa
--- /dev/null
+++ b/src/content/set-focus.mdx
@@ -0,0 +1,75 @@
+## `setFocus:` <TypeText>(name: string, options: SetFocusOptions) => void</TypeText>
+
+This method will allow users to programmatically focus on input. Make sure input's ref is registered into the hook form.
+
+### Props
+
+---
+
+| Name      |                | Type                         | Description                                   |
+| --------- | -------------- | ---------------------------- | --------------------------------------------- |
+| `name`    |                | <TypeText>string</TypeText>  | A input field name to focus                   |
+| `options` | `shouldSelect` | <TypeText>boolean</TypeText> | Whether to select the input content on focus. |
+
+<Admonition type="important" title="Rules">
+
+- This API will invoke focus method from the ref, so it's important to provide `ref` during `register`.
+- Avoid calling `setFocus` right after `reset` as all input references will be removed by `reset` API.
+
+</Admonition>
+
+### Examples
+
+---
+
+<TabGroup buttonLabels={["TS", "JS"]}>
+
+```typescript copy sandbox="https://codesandbox.io/s/setfocus-rolus"
+import * as React from "react"
+import { useForm } from "react-hook-form"
+
+type FormValues = {
+  firstName: string
+}
+
+export default function App() {
+  const { register, handleSubmit, setFocus } = useForm<FormValues>()
+  const onSubmit = (data: FormValues) => console.log(data)
+  renderCount++
+
+  React.useEffect(() => {
+    setFocus("firstName")
+  }, [setFocus])
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register("firstName")} placeholder="First Name" />
+      <input type="submit" />
+    </form>
+  )
+}
+```
+
+```javascript copy sandbox="https://codesandbox.io/s/setfocus-rolus"
+import * as React from "react"
+import { useForm } from "react-hook-form"
+
+export default function App() {
+  const { register, handleSubmit, setFocus } = useForm()
+  const onSubmit = (data) => console.log(data)
+  renderCount++
+
+  React.useEffect(() => {
+    setFocus("firstName")
+  }, [setFocus])
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register("firstName")} placeholder="First Name" />
+      <input type="submit" />
+    </form>
+  )
+}
+```
+
+</TabGroup>
diff --git a/src/content/unregister.mdx b/src/content/unregister.mdx
new file mode 100644
index 000000000..16e951189
--- /dev/null
+++ b/src/content/unregister.mdx
@@ -0,0 +1,128 @@
+## \</> `unregister:` <TypeText>(name: string | string[], options) => void</TypeText>
+
+This method allows you to `unregister` a single input or an array of inputs. It also provides a second optional argument to keep state after unregistering an input.
+
+### Props
+
+---
+
+The example below shows what to expect when you invoke the `unregister` method.
+
+```javascript
+<input {...register('yourDetails.firstName')} />
+<input {...register('yourDetails.lastName')} />
+```
+
+| Type                          | Input Name                             | Value              |
+| ----------------------------- | -------------------------------------- | ------------------ |
+| <TypeText>string</TypeText>   | `unregister("yourDetails")`            | `{}`               |
+| <TypeText>string</TypeText>   | `unregister("yourDetails.firstName")`  | `{ lastName: '' }` |
+| <TypeText>string[]</TypeText> | `unregister(["yourDetails.lastName"])` | `''`               |
+
+## Options
+
+---
+
+| Name               | Type                         | Description                                                                                                                                                                                                                   |
+| ------------------ | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `keepDirty`        | <TypeText>boolean</TypeText> | `isDirty` and `dirtyFields` will be remained during this action. However, this is not going to guarantee the next user input will not update `isDirty` formState, because `isDirty` is measured against the `defaultValues`.  |
+| `keepTouched`      | <TypeText>boolean</TypeText> | `touchedFields` will no longer remove that input after unregister.                                                                                                                                                            |
+| `keepIsValid`      | <TypeText>boolean</TypeText> | `isValid` will be remained during this action. However, this is not going to guarantee the next user input will not update `isValid` for schema validation, you will have to adjust the schema according with the unregister. |
+| `keepError`        | <TypeText>boolean</TypeText> | `errors` will not be updated.                                                                                                                                                                                                 |
+| `keepValue`        | <TypeText>boolean</TypeText> | input's current `value` will not be updated.                                                                                                                                                                                  |
+| `keepDefaultValue` | <TypeText>boolean</TypeText> | input's `defaultValue` which defined in `useForm` will be remained.                                                                                                                                                           |
+
+<Admonition type="important" title="Rules">
+
+- This method will remove input reference and its value, which means **built-in validation** rules will be removed as well.
+- By `unregister` an input, it will not affect the schema validation.
+
+  ```javascript
+  const schema = yup
+    .object()
+    .shape({
+      firstName: yup.string().required(),
+    })
+    .required()
+
+  unregister("firstName") // this will not remove the validation against firstName input
+  ```
+
+- Make sure you unmount that input which has `register` callback or else the input will get registered again.
+
+  ```javascript
+  const [show, setShow] = React.useState(true)
+
+  const onClick = () => {
+    unregister("test")
+    setShow(false) // make sure to unmount that input so register not invoked again.
+  }
+
+  {
+    show && <input {...register("test")} />
+  }
+  ```
+
+</Admonition>
+
+**Examples:**
+
+---
+
+<TabGroup buttonLabels={["TS", "JS"]}>
+
+```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-unregister-v6-ts-forked-4k2ey"
+import React, { useEffect } from "react"
+import { useForm } from "react-hook-form"
+
+interface IFormInputs {
+  firstName: string
+  lastName?: string
+}
+
+export default function App() {
+  const { register, handleSubmit, unregister } = useForm<IFormInputs>()
+  const onSubmit = (data: IFormInputs) => console.log(data)
+
+  React.useEffect(() => {
+    register("lastName")
+  }, [register])
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <button type="button" onClick={() => unregister("lastName")}>
+        unregister
+      </button>
+      <input type="submit" />
+    </form>
+  )
+}
+```
+
+```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-unregister-v6-forked-qs8o6"
+import React, { useEffect } from "react"
+import { useForm } from "react-hook-form"
+
+export default function App() {
+  const { register, handleSubmit, unregister } = useForm()
+
+  React.useEffect(() => {
+    register("lastName")
+  }, [register])
+
+  return (
+    <form>
+      <button type="button" onClick={() => unregister("lastName")}>
+        unregister
+      </button>
+      <input type="submit" />
+    </form>
+  )
+}
+```
+
+</TabGroup>
+
+### Video
+
+<YouTube youTubeId="TM99g_NW5Gk" />
diff --git a/src/content/use-form-context.mdx b/src/content/use-form-context.mdx
new file mode 100644
index 000000000..07e9ac2e5
--- /dev/null
+++ b/src/content/use-form-context.mdx
@@ -0,0 +1,49 @@
+## \</> `useFormContext:` <TypeText>Function</TypeText>
+
+This custom hook allows you to access the form context. `useFormContext` is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop.
+
+### Return
+
+---
+
+This hook will return all the useForm return methods and props.
+
+```javascript
+const methods = useForm()
+
+<FormProvider {...methods} /> // all the useForm return props
+
+const methods = useFormContext() // retrieve those props
+```
+
+<Admonition type="important" title="Rules">
+  You need to wrap your form with the [`FormProvider`](/docs/formprovider)
+  component for `useFormContext` to work properly.
+</Admonition>
+
+**Example:**
+
+```javascript copy codesandbox="https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi"
+import React from "react"
+import { useForm, FormProvider, useFormContext } from "react-hook-form"
+
+export default function App() {
+  const methods = useForm()
+  const onSubmit = (data) => console.log(data)
+
+  return (
+    <FormProvider {...methods}>
+      // pass all methods into the context
+      <form onSubmit={methods.handleSubmit(onSubmit)}>
+        <NestedInput />
+        <input type="submit" />
+      </form>
+    </FormProvider>
+  )
+}
+
+function NestedInput() {
+  const { register } = useFormContext() // retrieve all hook methods
+  return <input {...register("test")} />
+}
+```
diff --git a/src/content/docs/use-form.mdx b/src/content/use-form.mdx
similarity index 96%
rename from src/content/docs/use-form.mdx
rename to src/content/use-form.mdx
index 8a3cb4b18..c64bf3cd6 100644
--- a/src/content/docs/use-form.mdx
+++ b/src/content/use-form.mdx
@@ -1,10 +1,10 @@
-## \</> useForm: [`UseFormProps`](/ts#UseFormProps)
+## \</> `useForm:` [`UseFormProps`](/ts#UseFormProps)
 
 `useForm` is a custom hook for managing forms with ease. It takes one object as **optional** argument. The following example demonstrates all of its properties along with their default values.
 
 **Generic props:**
 
-|                                                         |                                                                   |
+| Option                                                  | Description                                                       |
 | ------------------------------------------------------- | ----------------------------------------------------------------- |
 | [mode](#mode)                                           | Validation strategy **before** submitting behaviour.              |
 | [reValidateMode](#reValidateMode)                       | Validation strategy **after** submitting behaviour.               |
@@ -19,15 +19,19 @@
 
 **Schema validation props:**
 
-|                       |                                                           |
+| Option                | Description                                               |
 | --------------------- | --------------------------------------------------------- |
 | [resolver](#resolver) | Integrates with your preferred schema validation library. |
 | [context](#context)   | A context object to supply for your schema validation.    |
 
-### :information_source: Props
+### Props
+
+---
 
 #### mode: <TypeText>onChange | onBlur | onSubmit | onTouched | all = 'onSubmit'</TypeText> <Popup top={3} message="React Native: compatible with Controller" /> {#mode}
 
+---
+
 This option allows you to configure the validation strategy before a user submits the form. The validation occurs during the `onSubmit` event, which is triggered by invoking the [`handleSubmit`](/docs/useform/handlesubmit) function.
 
 | Name      | Type                        | Description                                                                                                                                                                                                              |
@@ -40,10 +44,14 @@ This option allows you to configure the validation strategy before a user submit
 
 #### reValidateMode: <TypeText>onChange | onBlur | onSubmit = 'onChange' </TypeText> <Popup top={3} message="React Native: Custom register or using Controller" /> {#reValidateMode}
 
+---
+
 This option allows you to configure validation strategy when inputs with errors get re-validated **after** a user submits the form (`onSubmit` event and [`handleSubmit`](/docs/useform/handlesubmit) function executed). By default, re-validation occurs during the input change event.
 
 #### defaultValues: <TypeText>`FieldValues | Promise<FieldValues>`</TypeText> {#defaultValues}
 
+---
+
 The `defaultValues` prop populates the entire form with default values. It supports both synchronous and asynchronous assignment of default values. While you can set an input's default value using `defaultValue` or `defaultChecked` [(as detailed in the official React documentation)](https://reactjs.org/docs/uncontrolled-components.html), it is **recommended** to use `defaultValues` for the entire form.
 
 ```javascript copy
@@ -60,7 +68,7 @@ useForm({
 })
 ```
 
-##### :information_source: Rules
+<Admonition type="important" title="Rules">
 
 - You **should avoid** providing `undefined` as a default value, as it conflicts with the default state of a controlled component.
 - `defaultValues` are cached. To reset them, use the [reset](/docs/useform/reset) API.
@@ -81,8 +89,12 @@ useForm({
   }
   ```
 
+</Admonition>
+
 #### values: <TypeText>FieldValues</TypeText> {#values}
 
+---
+
 The `values` props will react to changes and update the form values, which is useful when your form needs to be updated by external state or server data.
 
 ```javascript copy
@@ -108,6 +120,8 @@ function App() {
 
 #### resetOptions: <TypeText>KeepStateOptions</TypeText> {#resetOptions}
 
+---
+
 This property is related to value update behaviors. When `values` or `defaultValues` are updated, the `reset` API is invoked internally. It's important to specify the desired behavior after `values` or `defaultValues` are asynchronously updated. The configuration option itself is a reference to the [reset](/docs/useform/reset) method's options.
 
 ```javascript copy
@@ -128,32 +142,46 @@ useForm({
 
 #### context: <TypeText>object</TypeText> {#context}
 
+---
+
 |                                                                                                                                                                   |                                                                      |
 | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
 | This context `object` is mutable and will be injected into the `resolver`'s second argument or [Yup](https://github.com/jquense/yup) validation's context object. | <CodeSandbox url="https://codesandbox.io/s/resolver-context-d9jqy"/> |
 
 #### criteriaMode: <TypeText>firstError | all</TypeText> {#criteriaMode}
 
+---
+
 |                                                                                                                                                                                          |                                                                                                         |
 | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
 | <ul><li> When set to `firstError` (default), only the first error from each field will be gathered.</li> <li> When set to `all`, all errors from each field will be gathered. </li></ul> | <CodeSandbox url="https://codesandbox.io/s/react-hook-form-v6-errors-validatecriteriamode-all-p9xm6" /> |
 
 #### shouldFocusError: <TypeText>boolean = true</TypeText> {#shouldFocusError}
 
+---
+
 When set to `true` (default), and the user submits a form that fails validation, focus is set on the first field with an error.
 
-> :memo: **Note:** only registered fields with a `ref` will work. Custom registered inputs do not apply. For example: `register('test') // doesn't work`
+<Admonition type="note">
+
+- Only registered fields with a `ref` will work. Custom registered inputs do not
+  apply. For example: `register('test') // doesn't work`
+- The focus order is based on the `register` order.
 
-> :memo: **Note:** the focus order is based on the `register` order.
+</Admonition>
 
 #### delayError: <TypeText>number</TypeText> {#delayError}
 
+---
+
 |                                                                                                                                                                                                                  |                                                                        |
 | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
 | This configuration delays the display of error states to the end-user by a specified number of milliseconds. If the user corrects the error input, the error is removed instantly, and the delay is not applied. | <CodeSandbox url="https://codesandbox.io/s/useform-delayerror-q6c2d"/> |
 
 #### shouldUnregister: <TypeText>boolean = false</TypeText> {#shouldUnregister}
 
+---
+
 By default, an input value will be retained when input is removed. However, you can set `shouldUnregister` to `true` to `unregister` input during unmount.
 
 - This is a global configuration that overrides child-level configurations. To have individual behavior, set the configuration at the component or hook level, not at `useForm`.
@@ -196,13 +224,17 @@ By default, an input value will be retained when input is removed. However, you
 
 #### shouldUseNativeValidation: <TypeText>boolean = false</TypeText> {#shouldUseNativeValidation}
 
+---
+
 This config will enable [browser native validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation). It will also enable CSS selectors `:valid` and`:invalid` making styling inputs easier. You can still use these selectors even when client-side validation is disabled.
 
 - Only works with `onSubmit` and `onChange` modes, as the `reportValidity` execution will focus the error input.
 - Each registered field's validation message is required to be string to display them natively.
 - This feature only works with the `register` API and`useController/Controller` that are connected with actual DOM references.
 
-##### :information_source: Examples
+**Examples:**
+
+---
 
 ```javascript copy
 import { useForm } from "react-hook-form"
@@ -230,13 +262,17 @@ export default function App() {
 
 #### resolver: [Resolver](/ts#Resolver) {#resolver}
 
+---
+
 This function allows you to use any external validation library such as [Yup](https://github.com/jquense/yup), [Zod](https://github.com/vriad/zod), [Joi](https://github.com/hapijs/joi), [Vest](https://github.com/ealush/vest), [Ajv](https://github.com/ajv-validator/ajv) and many others. The goal is to make sure you can seamlessly integrate whichever validation library you prefer. If you're not using a library, you can always write your own logic to validate your forms.
 
 ```bash copy
 npm install @hookform/resolvers
 ```
 
-##### :information_source: Props
+##### Props
+
+---
 
 | Name      | Type                                                                                                                      | Description                                                                                                                                 |
 | --------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -244,7 +280,7 @@ npm install @hookform/resolvers
 | `context` | <TypeText>object</TypeText>                                                                                               | This is the `context` object which you can provide to the `useForm` config. It is a mutable `object` that can be changed on each re-render. |
 | `options` | <TypeText><pre>{JSON.stringify({ criteriaMode: "string", fields: "object", names: "string[]" }, null,2)}</pre></TypeText> | This is the option object containing information about the validated fields, names and `criteriaMode` from `useForm`.                       |
 
-##### :information_source: Rules
+<Admonition type="important" title="Rules">
 
 - Schema validation focuses on field-level error reporting. Parent-level error checking is limited to the direct parent level, which is applicable for components such as group checkboxes.
 - This function will be cached.
@@ -254,7 +290,9 @@ npm install @hookform/resolvers
   - Make sure that you return an object with both `values` and `errors` properties. Their default values should be an empty object. For example: `{}`.
   - The keys of the `error` object should match the `name` values of your fields.
 
-##### :information_source: Examples
+</Admonition>
+
+**Example:**
 
 <TabGroup buttonLabels={["Yup","Zod","Joi","Ajv","Vest", "Custom"]}>
 
@@ -510,7 +548,9 @@ const App = () => {
 
 Need more? See [Resolver Documentation](https://github.com/react-hook-form/resolvers#quickstart)
 
-> :bulb: **Tip:** You can debug your schema via the following code snippet:
+<Admonition type="tip" >
+
+You can debug your schema via the following code snippet:
 
 ```javascript copy
 resolver: async (data, context, options) => {
@@ -524,7 +564,11 @@ resolver: async (data, context, options) => {
 }
 ```
 
-#### :information_source:Return
+</Admonition>
+
+#### Return
+
+---
 
 The following list contains reference to `useForm` return props.
 
diff --git a/src/content/watch.mdx b/src/content/watch.mdx
new file mode 100644
index 000000000..df084d68f
--- /dev/null
+++ b/src/content/watch.mdx
@@ -0,0 +1,178 @@
+## \</> `watch:` <TypeText>(names?: string | string[] | (data, options) => void) => unknown</TypeText>
+
+This method will watch specified inputs and return their values. It is useful to render input value and for determining what to render by condition.
+
+### Props
+
+---
+
+| Type                                                                           | Description                                                                                       |
+| ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
+| <TypeText>string</TypeText>                                                    | Watch input value by name (similar to lodash [get](https://lodash.com/docs/4.17.15#get) function) |
+| <TypeText>string[]</TypeText>                                                  | Watch multiple inputs                                                                             |
+| <TypeText>undefined</TypeText>                                                 | Watch all inputs                                                                                  |
+| <TypeText>`(data: unknown, { name: string, type: string }) => void`</TypeText> | Watch all inputs and invoke a callback                                                            |
+
+### Return
+
+---
+
+| Example                                                          | Return                                             |
+| ---------------------------------------------------------------- | -------------------------------------------------- |
+| `watch('inputName')`                                             | <TypeText>unknown</TypeText>                       |
+| `watch(['inputName1'])`                                          | <TypeText>unknown[]</TypeText>                     |
+| `watch()`                                                        | <TypeText>`{[key:string]: unknown}`</TypeText>     |
+| `watch((data, { name, type }) => console.log(data, name, type))` | <TypeText>`{ unsubscribe: () => void }`</TypeText> |
+
+<Admonition type="important" title="Rules">
+
+- When `defaultValue` is not defined, the first render of `watch` will return `undefined` because it is called before `register`. It's **recommend** to provide `defaultValues` at `useForm` to avoid this behaviour, but you can set the inline `defaultValue` as the second argument.
+- When both `defaultValue` and `defaultValues` are supplied, `defaultValue` will be returned.
+- This API will trigger re-render at the root of your app or form, consider using a callback or the [useWatch](/docs/usewatch) api if you are experiencing performance issues.
+- `watch` result is optimised for render phase instead of `useEffect`'s deps, to detect value update you may want to use an external custom hook for value comparison.
+
+</Admonition>
+
+**Examples:**
+
+---
+
+**Watch in a Form**
+
+<TabGroup buttonLabels={["TS", "JS"]}>
+
+```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d"
+import React from "react"
+import { useForm } from "react-hook-form"
+
+interface IFormInputs {
+  name: string
+  showAge: boolean
+  age: number
+}
+
+function App() {
+  const {
+    register,
+    watch,
+    formState: { errors },
+    handleSubmit,
+  } = useForm<IFormInputs>()
+  const watchShowAge = watch("showAge", false) // you can supply default value as second argument
+  const watchAllFields = watch() // when pass nothing as argument, you are watching everything
+  const watchFields = watch(["showAge", "age"]) // you can also target specific fields by their names
+
+  // Callback version of watch.  It's your responsibility to unsubscribe when done.
+  React.useEffect(() => {
+    const subscription = watch((value, { name, type }) =>
+      console.log(value, name, type)
+    )
+    return () => subscription.unsubscribe()
+  }, [watch])
+
+  const onSubmit = (data: IFormInputs) => console.log(data)
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <input {...register("name", { required: true, maxLength: 50 })} />
+        <input type="checkbox" {...register("showAge")} />
+        {/* based on yes selection to display Age Input*/}
+        {watchShowAge && (
+          <input type="number" {...register("age", { min: 50 })} />
+        )}
+        <input type="submit" />
+      </form>
+    </>
+  )
+}
+```
+
+```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-watch-v7-qbxd7"
+import React from "react"
+import { useForm } from "react-hook-form"
+
+function App() {
+  const {
+    register,
+    watch,
+    formState: { errors },
+    handleSubmit,
+  } = useForm()
+  const watchShowAge = watch("showAge", false) // you can supply default value as second argument
+  const watchAllFields = watch() // when pass nothing as argument, you are watching everything
+  const watchFields = watch(["showAge", "number"]) // you can also target specific fields by their names
+
+  // Callback version of watch.  It's your responsibility to unsubscribe when done.
+  React.useEffect(() => {
+    const subscription = watch((value, { name, type }) =>
+      console.log(value, name, type)
+    )
+    return () => subscription.unsubscribe()
+  }, [watch])
+
+  const onSubmit = (data) => console.log(data)
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <input type="checkbox" {...register("showAge")} />
+
+        {/* based on yes selection to display Age Input*/}
+        {watchShowAge && (
+          <input type="number" {...register("age", { min: 50 })} />
+        )}
+
+        <input type="submit" />
+      </form>
+    </>
+  )
+}
+```
+
+</TabGroup>
+
+**Watch in Field Array**
+
+```javascript copy sandbox="https://codesandbox.io/s/watch-with-usefieldarray-e2d64"
+import * as React from "react"
+import { useForm, useFieldArray, ArrayField } from "react-hook-form"
+
+function App() {
+  const { register, control, handleSubmit, watch } = useForm()
+  const { fields, remove, append } = useFieldArray({
+    name: "test",
+    control,
+  })
+  const onSubmit = (data: FormValues) => console.log(data)
+
+  console.log(watch("test"))
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {fields.map((field, index) => {
+        return (
+          <input key={field.id} {...register(`test[${index}].firstName`)} />
+        )
+      })}
+      <button
+        type="button"
+        onClick={() =>
+          append({
+            firstName: "bill" + renderCount,
+            lastName: "luo" + renderCount,
+          })
+        }
+      >
+        Append
+      </button>
+    </form>
+  )
+}
+```
+
+## Video
+
+---
+
+<YouTube youTubeId="3qLd69WMqKk" />
diff --git a/src/data/advanced.tsx b/src/data/advanced.tsx
deleted file mode 100644
index e6bf491b7..000000000
--- a/src/data/advanced.tsx
+++ /dev/null
@@ -1,628 +0,0 @@
-import CodeArea from "../components/CodeArea"
-import accessibleCodeBase from "../components/codeExamples/accessibleCodeBase"
-import accessibleCodeFinal from "../components/codeExamples/accessibleCodeFinal"
-import customHookWithValidationResolver from "../components/codeExamples/customHookWithValidationResolver"
-import { step1, step2, step3 } from "../components/codeExamples/formWizard"
-import * as CodeExampleTestingForm from "../components/codeExamples/testingForm"
-import CodeExempleSetupReactNative from "../components/codeExamples/setup.native"
-import smartForm from "../components/codeExamples/smartForm"
-import form from "../components/codeExamples/form"
-import input from "../components/codeExamples/input"
-import typographyStyles from "../styles/typography.module.css"
-import buttonStyles from "../styles/button.module.css"
-import Link from "next/link"
-
-export default {
-  title: "Advanced Usage",
-  header: {
-    title: "Advanced",
-    description: "Build complex and accessible forms",
-  },
-  controlledMixedWithUnControlled: {
-    title: "Controlled mixed with Uncontrolled Components",
-    description: (
-      <p>
-        React Hook Form embraces uncontrolled components but is also compatible
-        with controlled components. Most UI libraries are built to support only
-        controlled components, such as{" "}
-        <a
-          href="https://github.com/mui/material-ui"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          MUI
-        </a>{" "}
-        and{" "}
-        <a
-          href="https://github.com/ant-design/ant-design"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Antd
-        </a>
-        . But with React Hook Form, the re-rendering of controlled components
-        are also optimized. Here is an example that combines them both with
-        validation.
-      </p>
-    ),
-  },
-  errorMessage: {
-    title: "Error Messages",
-    description: (
-      <p>
-        Error messages are visual feedback to our users when there are issues
-        with their inputs. React Hook Form provides an <code>errors</code>{" "}
-        object to let you retrieve errors easily. There are several different
-        ways to improve error presentation on the screen.
-      </p>
-    ),
-    register: (
-      <>
-        You can simply pass the error message to <code>register</code>, via the{" "}
-        <code>message</code> attribute of the validation rule object, like this:
-      </>
-    ),
-    component:
-      "Create an <code>ErrorMessage</code> component to help display the error.",
-    optionalChaining: (
-      <>
-        <p>
-          The <code>?.</code>{" "}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining"
-          >
-            optional chaining
-          </a>{" "}
-          operator permits reading the <code>errors</code> object without
-          worrying about causing another error due to <code>null</code> or{" "}
-          <code>undefined</code>.
-        </p>
-        <p>
-          <code>errors?.firstName?.message</code>
-        </p>
-      </>
-    ),
-    get: (
-      <p>
-        If your project is using{" "}
-        <a href="https://lodash.com" target="_blank" rel="noopener noreferrer">
-          lodash
-        </a>
-        , then you can leverage the lodash{" "}
-        <code>
-          <a
-            href="https://lodash.com/docs/4.17.15#get"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            get
-          </a>
-        </code>{" "}
-        function. Eg:
-        <br />
-        <br />
-        <code>{`get(errors, 'firstName.message')`}</code>
-      </p>
-    ),
-  },
-  accessibility: {
-    title: "Accessibility (A11y)",
-    description: (
-      <>
-        <p>
-          React Hook Form has support for native form validation, which lets you
-          validate inputs with your own rules. Since most of us have to build
-          forms with custom designs and layouts, it is our responsibility to
-          make sure those are accessible (A11y).
-        </p>
-
-        <p>
-          The following code example works as intended for validation; however,
-          it can be improved for accessibility.
-        </p>
-
-        <CodeArea rawData={accessibleCodeBase} />
-
-        <p>
-          The following code example is an improved version by leveraging{" "}
-          <a
-            rel="noopener noreferrer"
-            href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA"
-            target="_blank"
-          >
-            ARIA
-          </a>
-          .
-        </p>
-        <CodeArea rawData={accessibleCodeFinal} />
-
-        <p>
-          After this improvement, the screen reader will say:{" "}
-          <i>“Name, edit, invalid entry, This is required.”</i>
-        </p>
-      </>
-    ),
-  },
-  wizard: {
-    title: "Wizard Form / Funnel",
-    description: (
-      <>
-        <p>
-          It's pretty common to collect user information through different pages
-          and sections. We recommend using a state management library to store
-          user input through different pages or sections. In this example, we
-          are going to use{" "}
-          <a
-            className={buttonStyles.links}
-            href="https://github.com/bluebill1049/little-state-machine"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            little state machine
-          </a>{" "}
-          as our state management library (you can replace it with{" "}
-          <a
-            className={buttonStyles.links}
-            href="https://github.com/reduxjs/redux"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            redux
-          </a>{" "}
-          if you are more familiar with it).
-        </p>
-
-        <p style={{ textAlign: "center" }}>♦</p>
-
-        <p>
-          <b className={typographyStyles.note}>Step 1:</b> Set up your routes
-          and store.
-        </p>
-        <CodeArea
-          rawData={step1}
-          url="https://codesandbox.io/s/react-hook-form-wizard-form-9pg6j"
-        />
-
-        <p>
-          <b className={typographyStyles.note}>Step 2:</b> Create your pages,
-          collect and submit the data to the store and push to the next
-          form/page.
-        </p>
-        <CodeArea
-          rawData={step2}
-          url="https://codesandbox.io/s/react-hook-form-wizard-form-9pg6j"
-        />
-
-        <p>
-          <b className={typographyStyles.note}>Step 3:</b> Make your final
-          submission with all the data in the store or display the resulting
-          data.
-        </p>
-        <CodeArea
-          rawData={step3}
-          url="https://codesandbox.io/s/react-hook-form-wizard-form-9pg6j"
-        />
-
-        <p>
-          Following the above pattern, you should be able to build a wizard
-          form/funnel to collect user input data from multiple pages.
-        </p>
-      </>
-    ),
-  },
-  smartForm: {
-    title: "Smart Form Component",
-    description: (
-      <>
-        <p>
-          This idea here is that you can easily compose your form with inputs.
-          We are going to create a <code>Form</code> component to automatically
-          collect form data.
-        </p>
-
-        <CodeArea
-          rawData={smartForm}
-          url="https://codesandbox.io/s/react-hook-form-smart-form-component-forked-iq89z"
-        />
-
-        <p style={{ textAlign: "center" }}>♦</p>
-
-        <p>Let's have a look what's in each of these components.</p>
-
-        <code className={typographyStyles.codeHeading}>
-          <h2>Form</h2>
-        </code>
-
-        <p>
-          The <code>Form</code> component's responsibility is to inject all{" "}
-          <code>react-hook-form</code> methods into the child component.
-        </p>
-
-        <CodeArea
-          rawData={form}
-          url="https://codesandbox.io/s/react-hook-form-smart-form-component-forked-iq89z"
-        />
-
-        <code className={typographyStyles.codeHeading}>
-          <h2>Input / Select</h2>
-        </code>
-
-        <p>
-          Those input components' responsibility is to register them into{" "}
-          <code>react-hook-form</code>.
-        </p>
-        <CodeArea
-          rawData={input}
-          url="https://codesandbox.io/s/react-hook-form-smart-form-component-forked-iq89z"
-        />
-
-        <p>
-          With the <code>Form</code> component injecting{" "}
-          <code>react-hook-form</code>
-          's <code>props</code> into the child component, you can easily create
-          and compose complex forms in your app.
-        </p>
-      </>
-    ),
-  },
-  connectForm: {
-    title: "Connect Form",
-    description: (
-      <p>
-        When we are building forms, there are times when our input lives inside
-        of deeply nested component trees, and that's when{" "}
-        <Link href="/docs/useFormContext">FormContext</Link> comes in handy.
-        However, we can further improve the Developer Experience by creating a{" "}
-        <code>ConnectForm</code> component and leveraging React's{" "}
-        <a href="https://reactjs.org/docs/render-props.html">renderProps</a>.
-        The benefit is you can connect your input with React Hook Form much
-        easier.
-      </p>
-    ),
-  },
-  formContext: {
-    title: "FormProvider Performance",
-    description: (
-      <>
-        <p>
-          React Hook Form's{" "}
-          <Link href="/docs/#useFormContext">FormProvider</Link> is built upon{" "}
-          <a
-            href="https://reactjs.org/docs/context.html"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            React's Context
-          </a>{" "}
-          API. It solves the problem where data is passed through the component
-          tree without having to pass props down manually at every level. This
-          also causes the component tree to trigger a re-render when React Hook
-          Form triggers a state update, but we can still optimise our App if
-          required via the example below.
-          <br />
-        </p>
-        <p>
-          <b className={typographyStyles.note}>Note:</b> Using React Hook Form's{" "}
-          <Link href="/dev-tools">Devtools</Link> alongside{" "}
-          <Link href="/docs/useformcontext">FormProvider</Link> can cause
-          performance issues in some situations. Before diving deep in
-          performance optimizations, consider this bottleneck first.
-          <br />
-        </p>
-      </>
-    ),
-  },
-  customHookwithResolver: {
-    title: "Custom Hook with Resolver",
-    description: (
-      <>
-        <p>
-          You can build a custom hook as a resolver. A custom hook can easily
-          integrate with yup/Joi/Superstruct as a validation method, and to be
-          used inside validation resolver.
-        </p>
-        <ul>
-          <li>
-            <p>
-              Define a memorized validation schema (or define it outside your
-              component if you don't have any dependencies)
-            </p>
-          </li>
-          <li>
-            <p>Use the custom hook, by passing the validation schema</p>
-          </li>
-          <li>
-            <p>Pass the validation resolver to the useForm hook</p>
-          </li>
-        </ul>
-
-        <CodeArea
-          rawData={customHookWithValidationResolver}
-          url="https://codesandbox.io/s/custom-hook-with-resolver-v7-cwczk"
-        />
-      </>
-    ),
-  },
-  workingWithVirtualizedList: {
-    title: "Working with virtualized lists",
-    description: (
-      <>
-        <p>
-          Imagine a scenario where you have a table of data. This table might
-          contain hundreds or thousands of rows, and each row will have inputs.
-          A common practice is to only render the items that are in the
-          viewport, however this will cause issues as the items are removed from
-          the DOM when they are out of view and re-added. This will cause items
-          to reset to their default values when they re-enter the viewport.
-        </p>
-
-        <p>
-          An example is shown below using{" "}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://github.com/bvaughn/react-window"
-          >
-            react-window
-          </a>
-          .
-        </p>
-      </>
-    ),
-  },
-  testingForm: {
-    title: "Testing Form",
-    description: (
-      <>
-        <p>
-          Testing is very important because it prevents your code from having
-          bugs or mistakes. It also guarantees code safety when refactoring the
-          codebase.
-        </p>
-
-        <p>
-          We recommend using{" "}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://testing-library.com/"
-          >
-            testing-library
-          </a>
-          , because it is simple and tests are more focused on user behavior.
-        </p>
-
-        <p style={{ textAlign: "center" }}>♦</p>
-
-        <p>
-          <b className={typographyStyles.note}>Step 1:</b> Set up your testing
-          environment.
-        </p>
-
-        <p>
-          Please install{" "}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://github.com/testing-library/jest-dom"
-          >
-            @testing-library/jest-dom
-          </a>{" "}
-          with the latest version of <code>jest</code>, because react-hook-form
-          uses <code>MutationObserver</code> to detect inputs, and to get
-          unmounted from the DOM.
-        </p>
-
-        <p>
-          <b className={typographyStyles.note}>Note:</b> If you are using React
-          Native, you don't need to install{" "}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://github.com/testing-library/jest-dom"
-          >
-            @testing-library/jest-dom
-          </a>
-          .
-        </p>
-
-        <CodeArea rawData="npm install -D @testing-library/jest-dom" />
-
-        <p>
-          Create <code>setup.js</code> to import{" "}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://github.com/testing-library/jest-dom"
-          >
-            @testing-library/jest-dom
-          </a>
-          .
-        </p>
-        <CodeArea
-          rawData={'import "@testing-library/jest-dom";'}
-          url="https://codesandbox.io/s/react-hook-form-unit-test-docs-066zk?file=/src/setupTests.js"
-        />
-        <p>
-          <b className={typographyStyles.note}>Note:</b> If you are using React
-          Native, you need to create setup.js, define <code>window</code>{" "}
-          object, and include the following lines in the setup file:
-        </p>
-        <CodeArea rawData={CodeExempleSetupReactNative} />
-
-        <p>
-          Finally, you have to update <code>setup.js</code> in{" "}
-          <code>jest.config.js</code> to include the file.
-        </p>
-
-        <CodeArea
-          rawData={CodeExampleTestingForm.step1}
-          url="https://codesandbox.io/s/react-hook-form-unit-test-docs-066zk"
-        />
-
-        <p>
-          Additionally, you can set up{" "}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://github.com/testing-library/eslint-plugin-testing-library"
-          >
-            eslint-plugin-testing-library
-          </a>{" "}
-          and{" "}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://github.com/testing-library/eslint-plugin-jest-dom"
-          >
-            eslint-plugin-jest-dom
-          </a>{" "}
-          to follow best practices and anticipate common mistakes when writing
-          your tests.
-        </p>
-
-        <p>
-          <b className={typographyStyles.note}>Step 2:</b> Create login form.
-        </p>
-
-        <p>
-          We have set the role attribute accordingly. These attributes are
-          helpful for when you write tests, and they improve accessibility. For
-          more information, you can refer to the{" "}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://testing-library.com/"
-          >
-            testing-library
-          </a>{" "}
-          documentation.
-        </p>
-
-        <CodeArea
-          rawData={CodeExampleTestingForm.step2}
-          url="https://codesandbox.io/s/react-hook-form-unit-test-docs-066zk?file=/src/App.js"
-        />
-
-        <p>
-          <b className={typographyStyles.note}>Step 3:</b> Write tests.
-        </p>
-
-        <p>The following criteria are what we try to cover with the tests:</p>
-
-        <ul>
-          <li>
-            <p>Test submission failure.</p>
-
-            <p>
-              We are using <code>waitFor</code> util and <code>find*</code>{" "}
-              queries to detect submission feedback, because the{" "}
-              <code>handleSubmit</code> method is executed asynchronously.
-            </p>
-          </li>
-          <li>
-            <p>Test validation associated with each inputs.</p>
-
-            <p>
-              We are using the <code>*ByRole</code> method when querying
-              different elements because that's how users recognize your UI
-              component.
-            </p>
-          </li>
-          <li>
-            <p>Test successful submission.</p>
-          </li>
-        </ul>
-
-        <CodeArea
-          rawData={CodeExampleTestingForm.step3}
-          url="https://codesandbox.io/s/react-hook-form-unit-test-docs-066zk?file=/src/App.test.js"
-        />
-
-        <h4>Resolving act warning during test</h4>
-
-        <p>
-          If you test a component that uses react-hook-form, you might run into
-          a warning like this, even if you didn't write any asynchronous code
-          for that component:
-        </p>
-
-        <blockquote>
-          Warning: An update to MyComponent inside a test was not wrapped in
-          act(...)
-        </blockquote>
-
-        <CodeArea
-          rawData={CodeExampleTestingForm.actWarningComponent}
-          url="https://codesandbox.io/s/react-hook-form-unit-test-act-warning-docs-yq7uj?file=/src/App.js"
-        />
-
-        <CodeArea
-          rawData={CodeExampleTestingForm.actWarningTest}
-          url="https://codesandbox.io/s/react-hook-form-unit-test-act-warning-docs-yq7uj?file=/src/App.test.js"
-        />
-
-        <p>
-          In this example, there is a simple form without any apparent async
-          code, and the test merely renders the component and tests for the
-          presence of a button. However, it still logs the warning about updates
-          not being wrapped in <code>act()</code>.
-        </p>
-
-        <p>
-          This is because react-hook-form internally uses asynchronous
-          validation handlers. In order to compute the formState, it has to
-          initially validate the form, which is done asynchronously, resulting
-          in another render. That update happens after the test function
-          returns, which triggers the warning.
-        </p>
-
-        <p>
-          To solve this, wait until some element from your UI appears with{" "}
-          <code>find*</code> queries. Note that you <strong>must not</strong>{" "}
-          wrap your <code>render()</code> calls in <code>act()</code>.{" "}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#wrapping-things-in-act-unnecessarily"
-          >
-            You can read more about wrapping things in <code>act</code>{" "}
-            unnecessarily here
-          </a>
-          .
-        </p>
-        <CodeArea
-          rawData={CodeExampleTestingForm.actWarningSolution}
-          url="https://codesandbox.io/s/react-hook-form-unit-test-act-warning-docs-tcb7y?file=/src/App.test.js"
-        />
-      </>
-    ),
-  },
-  transformAndParse: {
-    title: "Transform and Parse",
-    description: (
-      <>
-        <p>
-          The native input returns the value in <code>string</code> format
-          unless invoked with <code>valueAsNumber</code> or{" "}
-          <code>valueAsDate</code>, you can read more under{" "}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"
-          >
-            this section
-          </a>
-          . However, it's not perfect. We still have to deal with{" "}
-          <code>isNaN</code> or <code>null</code> values. So it's better to
-          leave the transform at the custom hook level. In the following
-          example, we are using the <code>Controller</code> to include the
-          functionality of the transform value's input and output. You can also
-          achieve a similar result with a custom <code>register</code>.
-        </p>
-      </>
-    ),
-  },
-}
diff --git a/src/data/faq.tsx b/src/data/faq.tsx
deleted file mode 100644
index b569e3ef7..000000000
--- a/src/data/faq.tsx
+++ /dev/null
@@ -1,768 +0,0 @@
-import colors from "../styles/colors"
-import enzymeInput from "../components/codeExamples/enzymeInput"
-import focusController from "../components/codeExamples/focusController"
-import toggleFields from "../components/codeExamples/toggleFields"
-import CodeArea from "../components/CodeArea"
-import copyClipBoard from "../components/utils/copyClipBoard"
-import typographyStyles from "../styles/typography.module.css"
-import tableStyles from "../styles/table.module.css"
-import buttonStyles from "../styles/button.module.css"
-import getStartedStyles from "../components/GetStarted.module.css"
-import ClipBoard from "../components/ClipBoard"
-import accessibleCode from "../components/codeExamples/accessibleCode"
-import initialValue from "../components/codeExamples/initialValue"
-import shareRef from "../components/codeExamples/shareRef"
-import shareRefTs from "../components/codeExamples/shareRefTs"
-import manualValidation from "../components/codeExamples/manualValidation"
-import control from "../components/codeExamples/control"
-import controlled from "../components/codeExamples/controlled"
-import TabGroup from "../components/TabGroup"
-import importKeystroke from "../components/codeExamples/importKeystroke"
-import asyncDefaultValue from "../components/codeExamples/asyncDefaultValue"
-import asyncValues from "../components/codeExamples/asyncValues"
-
-export default {
-  title: "FAQs",
-  header: {
-    title: "FAQs",
-    description: "frequently asked questions",
-  },
-  questions: [
-    {
-      title: "Performance of React Hook Form",
-      description: (
-        <p>
-          Performance is one of the primary reasons why this library was
-          created. React Hook Form relies on an uncontrolled form, which is the
-          reason why the <code>register</code> function captures{" "}
-          <code>ref</code> and the controlled component has its re-rendering
-          scope with <code>Controller</code> or <code>useController</code>. This
-          approach reduces the amount of re-rendering that occurs due to a user
-          typing in an input or other form values changing at the root of your
-          form or applications. Components mount to the page faster than
-          controlled components because they have less overhead. As a reference,
-          there is a quick comparison test that you can refer to at{" "}
-          <a
-            href="https://github.com/bluebill1049/react-hook-form-performance-compare"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            this repo link
-          </a>
-          .
-        </p>
-      ),
-    },
-    {
-      title: "How to create an accessible input error and message?",
-      description: (
-        <>
-          <p>
-            React Hook Form is based on{" "}
-            <a
-              href="https://reactjs.org/docs/uncontrolled-components.html"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              Uncontrolled Components
-            </a>
-            , which gives you the ability to easily build an accessible custom
-            form.
-          </p>
-          <CodeArea rawData={accessibleCode} />
-        </>
-      ),
-    },
-    {
-      title: "Does it work with Class Components?",
-      description: (
-        <>
-          <p>
-            No, not out of the box. If you want to do this, you can build a
-            wrapper around it and use it in your Class Component.
-          </p>
-
-          <blockquote>
-            You can’t use Hooks inside of a class component, but you can
-            definitely mix classes and function components with Hooks in a
-            single tree. Whether a component is a class or a function that uses
-            Hooks is simply an implementation detail of that component. In the
-            longer term, we expect Hooks to be the primary way people write
-            React components.
-          </blockquote>
-        </>
-      ),
-    },
-    {
-      title: "How to reset the form?",
-      description: (
-        <>
-          <p>There are two methods to clear the form:</p>
-          <ul>
-            <li>
-              <b>HTMLFormElement.reset()</b>
-              <p>
-                This method does the same thing as clicking a form's reset
-                button. It only clears <code>input/select/checkbox</code>{" "}
-                values.
-              </p>
-            </li>
-            <li>
-              <b>
-                React Hook Form API: <code>reset()</code>
-              </b>
-              <p>
-                React Hook Form's <code>reset</code> method will reset all field
-                values, and will also clear all <code>errors</code> within the
-                form.
-              </p>
-            </li>
-          </ul>
-        </>
-      ),
-    },
-    {
-      title: "How to initialize form values?",
-      description: (
-        <>
-          <p>
-            Being that React Hook Form relies on an uncontrolled form, you can
-            specify a <code>defaultValue</code> or <code>defaultChecked</code>{" "}
-            to an individual field. However, it is more common and recommended
-            to initialize a form by passing <code>defaultValues</code> to{" "}
-            <code>useForm</code>.
-          </p>
-          <CodeArea rawData={initialValue} />
-
-          <p>For async default values, you can use the following methods:</p>
-
-          <ul>
-            <li>
-              <p>
-                Async <code>defaultValues</code>
-              </p>
-              <CodeArea rawData={asyncDefaultValue} />
-            </li>
-            <li>
-              <p>
-                Reactive <code>values</code>
-              </p>
-
-              <CodeArea rawData={asyncValues} />
-            </li>
-          </ul>
-        </>
-      ),
-    },
-    {
-      title: "How to share ref usage?",
-      description: (
-        <>
-          <p>
-            React Hook Form needs a <code>ref</code> to collect the input value.
-            However, you may want to use <code>ref</code> for other purposes
-            (e.g. scroll into the view, or focus).
-          </p>
-          <CodeArea rawData={shareRef} tsRawData={shareRefTs} />
-        </>
-      ),
-    },
-    {
-      title: "What if you don't have access to ref?",
-      description: (
-        <>
-          <p>
-            You can actually <code>register</code> an input without a{" "}
-            <code>ref</code>. In fact, you can manually <code>setValue</code>,{" "}
-            <code>setError</code> and <code>trigger</code>.
-          </p>
-
-          <p>
-            <b className={typographyStyles.note}>Note:</b> Because{" "}
-            <code>ref</code> has not been registered, React Hook Form won't be
-            able to register event listeners to the inputs. This means you will
-            have to manually update value and error.
-          </p>
-
-          <CodeArea rawData={manualValidation} />
-        </>
-      ),
-    },
-    {
-      title: "Why is the first keystroke not working?",
-      description: (
-        <>
-          <p>
-            Make sure you are not using <code>value</code>. The correct property
-            is <code>defaultValue</code>.
-          </p>
-
-          <p>
-            React Hook Form is focusing on uncontrolled inputs, which means you
-            don't need to change the input <code>value</code> via{" "}
-            <code>state</code> via <code>onChange</code>. In fact, you don't
-            need <code>value</code> at all. You only need to set{" "}
-            <code>defaultValue</code> for the initial input value.
-          </p>
-          <CodeArea withOutCopy rawData={importKeystroke} />
-        </>
-      ),
-    },
-    {
-      title: "React Hook Form, Formik or Redux Form?",
-      description: (
-        <>
-          <p>
-            First of all, all libs try to solve the same problem: make the form
-            building experience as easy as possible. However, there are some
-            fundamental differences between these three.{" "}
-            <code>react-hook-form</code> is built with uncontrolled inputs in
-            mind and tries to provide your form with the best performance and
-            least amount of re-renders possible. Additionallly,{" "}
-            <code>react-hook-form</code> is built with React Hooks and used as a
-            hook, which means there is no Component for you to import. Here are
-            some of the detailed differences:
-          </p>
-
-          <div className={tableStyles.tableWrapper}>
-            <table className={tableStyles.table}>
-              <thead>
-                <tr style={{ borderBottom: `1px solid ${colors.lightPink}` }}>
-                  <th style={{ width: "100px" }} />
-                  <th style={{ width: "250px" }}>
-                    <p>React Hook Form</p>
-                  </th>
-                  <th>
-                    <p>Formik</p>
-                  </th>
-                  <th>
-                    <p>Redux Form</p>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>
-                    <b>Component</b>
-                  </td>
-                  <td>
-                    <a
-                      href="https://reactjs.org/docs/uncontrolled-components.html"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      uncontrolled
-                    </a>{" "}
-                    &{" "}
-                    <a
-                      href="https://reactjs.org/docs/forms.html"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      controlled
-                    </a>
-                  </td>
-                  <td>
-                    <a
-                      href="https://reactjs.org/docs/forms.html"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      controlled
-                    </a>
-                  </td>
-                  <td>
-                    <a
-                      href="https://reactjs.org/docs/forms.html"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      controlled
-                    </a>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <b>Rendering</b>
-                  </td>
-                  <td>minimum re-render and optimise computation</td>
-                  <td>
-                    re-render according to local state changes (As you type in
-                    the input.)
-                  </td>
-                  <td>
-                    re-render according to state management lib (Redux) changes
-                    (As you type in the input.)
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <b>API</b>
-                  </td>
-                  <td>Hooks</td>
-                  <td>Component (RenderProps, Form, Field) + Hooks</td>
-                  <td>Component (RenderProps, Form, Field)</td>
-                </tr>
-                <tr>
-                  <td>
-                    <b>Package size</b>
-                  </td>
-                  <td>
-                    Small
-                    <br />
-                    <code>
-                      react-hook-form@7.27.0
-                      <br />
-                      <b className={typographyStyles.note}>8.5KB</b>
-                    </code>
-                  </td>
-                  <td>
-                    Medium
-                    <br />
-                    <code>
-                      formik@2.1.4
-                      <br />
-                      <b className={typographyStyles.note}>15KB</b>
-                    </code>
-                  </td>
-                  <td>
-                    Large
-                    <br />
-                    <code>
-                      redux-form@8.3.6
-                      <br />
-                      <b className={typographyStyles.note}>26.4KB</b>
-                    </code>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <b>Validation</b>
-                  </td>
-                  <td>
-                    Built-in,{" "}
-                    <a
-                      href="https://github.com/jquense/yup"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      Yup
-                    </a>
-                    ,{" "}
-                    <a
-                      href="https://github.com/vriad/zod"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      Zod
-                    </a>
-                    ,{" "}
-                    <a
-                      href="https://github.com/hapijs/joi"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      Joi
-                    </a>
-                    ,{" "}
-                    <a
-                      href="https://github.com/ianstormtaylor/superstruct"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      Superstruct
-                    </a>{" "}
-                    and build your own.
-                  </td>
-                  <td>
-                    Build yourself or{" "}
-                    <a
-                      href="https://github.com/jquense/yup"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      Yup
-                    </a>
-                  </td>
-                  <td>Build yourself or Plugins</td>
-                </tr>
-                <tr>
-                  <td>
-                    <b>Learning curve</b>
-                  </td>
-                  <td>Low to Medium</td>
-                  <td>Medium</td>
-                  <td>Medium</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </>
-      ),
-    },
-    {
-      title: "watch vs getValues vs state",
-      description: (
-        <div>
-          <ul>
-            <li>
-              <p>
-                <b className={typographyStyles.note}>watch:</b> subscribe to
-                either all inputs or a specified input's changes via an event
-                listener and re-render based on which fields are subscribed to.
-                Check out{" "}
-                <a
-                  href="https://codesandbox.io/s/react-hook-form-watch-with-radio-buttons-and-select-examples-ovfus"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  this codesandbox
-                </a>{" "}
-                for actual behaviour.
-              </p>
-            </li>
-            <li>
-              <p>
-                <b className={typographyStyles.note}>getValues</b>: get values
-                that are stored inside the custom hook as reference, fast and
-                cheap. This method doesn’t trigger a re-render.
-              </p>
-            </li>
-            <li>
-              <p>
-                <b className={typographyStyles.note}>local state</b>: React
-                local state represents more than just an input’s state and also
-                decides what to render. This will trigger on each input’s
-                change.
-              </p>
-            </li>
-          </ul>
-        </div>
-      ),
-    },
-    {
-      title:
-        "Why is default value not changing correctly with ternary operator?",
-      description: (
-        <>
-          <p>
-            React Hook Form doesn't control your entire form and inputs, which
-            is why React wouldn't recognize that the actual input has been
-            exchanged or swapped. As a solution, you can resolve this problem by
-            giving a unique <code>key</code> prop to your input. You can also
-            read more about the key props from{" "}
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://kentcdodds.com/blog/understanding-reacts-key-prop"
-            >
-              this article written by Kent C. Dodds
-            </a>
-            .
-          </p>
-          <CodeArea
-            rawData={toggleFields}
-            url="https://codesandbox.io/s/react-hook-form-faq-toggle-fields-3htr6"
-          />
-        </>
-      ),
-    },
-    {
-      title: "How to work with modal or tab forms?",
-      description: (
-        <>
-          <p>
-            It's important to understand that React Hook Form embraces native
-            form behavior by storing input state inside each input (except
-            custom <code>register</code> at <code>useEffect</code>). A common
-            misconception is that input state remains with mounted or unmounted
-            inputs. Such as when working with a modal or tab forms. Instead, the
-            correct solution is to build a new form for your form inside each
-            modal or tab and capture your submission data in local or global
-            state and then do something with the combined data.
-          </p>
-
-          <ul>
-            <li>
-              <p>
-                <a
-                  href="https://codesandbox.io/s/react-hook-form-modal-form-conditional-inputs-c7n0r"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Modal form and toggle inputs example
-                </a>
-              </p>
-            </li>
-            <li>
-              <p>
-                <a
-                  href="https://codesandbox.io/s/tabs-760h9"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Tab form example
-                </a>
-              </p>
-            </li>
-          </ul>
-
-          <p>
-            Alternatively you can use the deprecated option{" "}
-            <code>shouldUnregister: false</code> when calling `useForm`.
-          </p>
-
-          <TabGroup buttonLabels={["Controller", "Custom Register"]}>
-            <CodeArea rawData={control} />
-            <CodeArea
-              rawData={controlled}
-              url="https://codesandbox.io/s/react-hook-form-controlled-input-forked-rl2v1"
-            />
-          </TabGroup>
-        </>
-      ),
-    },
-    {
-      title: "Controller not working with shouldFocusError? (V6)",
-      description: (
-        <>
-          <p>
-            After a validation error, React Hook Form will automatically focus
-            the invalids elements that have a proper ref, like the native inputs
-            (eg: <code>{`<input />`}</code>) or some 3rd party Components that
-            correctly export a ref (eg: from MUI{" "}
-            <code>{`<TextField inputRef={register({required: 'Field Required'})} />`}</code>
-            )
-          </p>
-
-          <p>
-            However, for some 3rd party controlled Components (like{" "}
-            <code>{`<Autocomplete>`}</code> from MUI or <code>{`<XX>`}</code>{" "}
-            from AntD) it's very difficult to predict its ref because the
-            formats vary. In this case, React Hook Form will properly detect the
-            validation error but <i>will not be able to</i> automatically focus
-            that kind of Component.
-          </p>
-
-          <p>
-            As a workaround, after the validation error, you can manually focus
-            the 3rd party controlled Component (if you can get the actual
-            internal input ref), for example:
-          </p>
-          <CodeArea rawData={focusController} />
-
-          <p>
-            If you find difficult to make the autofocus with external controlled
-            component work correctly, it is possible to disable the "autofocus
-            on error" feature. It is possible that this behavior will bring a
-            better user experience in some cases.{" "}
-            <code>{`useForm({shouldFocusError: false});`}</code>
-          </p>
-        </>
-      ),
-    },
-    {
-      title: "Can it work with Controlled components?",
-      description: (
-        <>
-          <p>
-            Short answer: <b>Yes</b>
-          </p>
-          <p>
-            <code>react-hook-form</code> is not recommending you to build
-            controlled forms, however you can still achieve that easily.
-          </p>
-          <p>
-            The trick is to use the <code>watch</code> API to monitor each
-            input's change and assign it to the value prop.
-          </p>
-          <p>
-            Alternatively, you can use our wrapper component{" "}
-            <a
-              href="https://www.react-hook-form.com/api#Controller"
-              title="React Hook Form Controller"
-            >
-              Controller
-            </a>{" "}
-            which <code>register</code>s components for you.
-          </p>
-        </>
-      ),
-    },
-    {
-      title: "Testing React Hook Form",
-      description: (
-        <div>
-          <ul>
-            <li>
-              <p>
-                Why is testing not working with React Native (
-                <code>react-native-testing-library</code>)?
-              </p>
-
-              <p>
-                React Hook Form doesn't register inputs during server side
-                render, which means testing in react native could result in the{" "}
-                <code>window</code> object being <code>undefined</code>. A quick
-                fix would be to stub the <code>window</code> object to enable
-                the registration process.
-              </p>
-            </li>
-            <li>
-              <p>
-                Why am I getting an <code>act</code> warning?
-              </p>
-
-              <p>
-                All validation methods in React Hook Form will be treated as
-                async functions, so it's important to wrap <code>async</code>{" "}
-                around your{" "}
-                <a
-                  className={buttonStyles.codeAsLink}
-                  href="https://reactjs.org/docs/test-utils.html#act"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  act
-                </a>
-                .
-              </p>
-            </li>
-            <li>
-              <p>Why doesn't input change fire events?</p>
-
-              <p>
-                React Hook Form uses <code>input</code> events for input
-                changes. If you're using <strong>react-testing-library</strong>,
-                you can easily switch to <code>fireEvent.input</code>. Here is a
-                testing{" "}
-                <a
-                  className={buttonStyles.codeAsLink}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  href="https://codesandbox.io/s/react-hook-form-test-s4j7c?from-embed"
-                >
-                  example at codesandbox
-                </a>
-                .
-              </p>
-              <p>
-                If you're using <strong>enzyme</strong>, you'll need to manually
-                set the <code>value</code> of your input's DOM node, then
-                dispatch an input event.
-              </p>
-              <CodeArea rawData={enzymeInput} />
-            </li>
-          </ul>
-        </div>
-      ),
-    },
-    {
-      title: "Browser Support?",
-      description: (
-        <>
-          <p>
-            React Hook Form supports all major browsers. For legacy IE11
-            support, you can import react-hook-form IE 11 version. Make sure you
-            install <code>@babel/runtime-corejs3</code> as well.
-          </p>
-
-          <CodeArea rawData="npm i @babel/runtime-corejs3" />
-          <p>If you encounter: </p>
-          <blockquote>
-            {" "}
-            Object doesn't support property or method 'find'
-          </blockquote>
-          <p>
-            You should try to add this{" "}
-            <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find#Polyfill">
-              find polyfill
-            </a>{" "}
-            to the top of your app.js
-          </p>
-
-          <h4>Version ^6.7.0</h4>
-
-          <p>
-            <b className={typographyStyles.note}>Important: </b>from version
-            6.7.0 onwards we are dropping babel, and using TypeScript to
-            transpile to es5. You can refer to this{" "}
-            <a
-              href="https://github.com/react-hook-form/react-hook-form/issues/2775"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              issue
-            </a>{" "}
-            for more detail.
-          </p>
-
-          <p>
-            The following polyfills are necessary. Feel free to let us know or
-            update the doc to reflect other missing polyfills.
-          </p>
-
-          <ul>
-            <li>
-              <p>
-                <code>Object.values</code>
-              </p>
-            </li>
-            <li>
-              <p>
-                <code>Object.entries</code>
-              </p>
-            </li>
-            <li>
-              <p>
-                <code>Array.flat</code>
-              </p>
-            </li>
-            <li>
-              <p>
-                <code>Array.find</code>
-              </p>
-            </li>
-            <li>
-              <p>
-                <code>Array.includes</code>
-              </p>
-            </li>
-            <li>
-              <p>
-                <code>String.startsWith</code>
-              </p>
-            </li>
-          </ul>
-        </>
-      ),
-    },
-    {
-      title: "Testing failed due to MutationObserver?",
-      description: (
-        <div>
-          <p>
-            If you have difficulty during testing and the issue was caused by{" "}
-            <code>MutationObserver</code>. Make sure you install{" "}
-            <code>mutationobserver</code> and import this package in your test{" "}
-            <a
-              href="https://jestjs.io/docs/en/configuration"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              setup.js file
-            </a>
-            .
-          </p>
-          <span>
-            npm i mutationobserver-shim
-            <ClipBoard
-              className={getStartedStyles.copyButton}
-              onClick={() => copyClipBoard("npm i mutationobserver-shim")}
-            />
-          </span>
-        </div>
-      ),
-    },
-  ],
-}
diff --git a/src/data/languages.js b/src/data/languages.js
deleted file mode 100644
index cfc041ec4..000000000
--- a/src/data/languages.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  langs: ["en", "es", "jp", "zh", "kr", "pt", "ru"],
-  defaultLangKey: "en",
-}
diff --git a/src/data/ts.tsx b/src/data/ts.tsx
deleted file mode 100644
index 6ef4c9ef2..000000000
--- a/src/data/ts.tsx
+++ /dev/null
@@ -1,568 +0,0 @@
-import CodeArea from "../components/CodeArea"
-import TabGroup from "../components/TabGroup"
-import handleSubmitCodeTs from "../components/codeExamples/handleSubmitCodeTs"
-
-export default {
-  nestedValue: {
-    title: "NestedValue",
-    description: (
-      <TabGroup buttonLabels={["Code Example", "Type"]}>
-        <CodeArea
-          url="https://codesandbox.io/s/react-hook-form-nestedvalue-lskdv"
-          rawData={`import React from 'react';
-import { useForm, NestedValue } from 'react-hook-form';
-import { Autocomplete, TextField, Select } from '@material-ui/core';
-import { Autocomplete } from '@material-ui/lab';
-
-type Option = {
-  label: string;
-  value: string;
-};
-
-const options = [
-  { label: 'Chocolate', value: 'chocolate' },
-  { label: 'Strawberry', value: 'strawberry' },
-  { label: 'Vanilla', value: 'vanilla' },
-];
-
-export default function App() {
-  const { register, handleSubmit, watch, setValue, formState: { errors } } = useForm<{
-    autocomplete: NestedValue<Option[]>;
-    select: NestedValue<number[]>;
-  }>({
-    defaultValues: { autocomplete: [], select: [] },
-  });
-  const onSubmit = handleSubmit((data) => console.log(data));
-
-  React.useEffect(() => {
-    register('autocomplete', {
-      validate: (value) => value.length || 'This is required.',
-    });
-    register('select', {
-      validate: (value) => value.length || 'This is required.',
-    });
-  }, [register]);
-
-  return (
-    <form onSubmit={onSubmit}>
-      <Autocomplete
-        options={options}
-        getOptionLabel={(option: Option) => option.label}
-        onChange={(e, options) => setValue('autocomplete', options)}
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            error={Boolean(errors?.autocomplete)}
-            helperText={errors?.autocomplete?.message}
-          />
-        )}
-      />
-
-      <Select value="" onChange={(e) => setValue('muiSelect', e.target.value as number[])}>
-        <MenuItem value={10}>Ten</MenuItem>
-        <MenuItem value={20}>Twenty</MenuItem>
-      </Select>
-
-      <input type="submit" />
-    </form>
-  );
-}`}
-        />
-        <CodeArea
-          rawData={`import { useForm, NestedValue } from 'react-hook-form';
-
-type FormValues = {
-  key1: string;
-  key2: number;
-  key3: NestedValue<{
-    key1: string;
-    key2: number;
-  }>;
-  key4: NestedValue<string[]>
-};
-
-const { formState: { errors } } = useForm<FormValues>();
-
-errors?.key1?.message // no type error
-errors?.key2?.message // no type error
-errors?.key3?.message // no type error
-errors?.key4?.message // no type error`}
-        />
-      </TabGroup>
-    ),
-  },
-  resolver: {
-    title: "Resolver",
-    description: (
-      <CodeArea
-        url="https://codesandbox.io/s/react-hook-form-resolver-forked-mjsx7"
-        rawData={`import React from 'react';
-import { useForm, Resolver } from 'react-hook-form';
-
-type FormValues = {
-  firstName: string;
-  lastName: string;
-};
-
-const resolver: Resolver<FormValues> = async (values) => {
-  return {
-    values: values.firstName ? values : {},
-    errors: !values.firstName
-      ? {
-          firstName: {
-            type: 'required',
-            message: 'This is required.',
-          },
-        }
-      : {},
-  };
-};
-
-export default function App() {
-  const { register, handleSubmit, formState: { errors } } = useForm<FormValues>({ resolver });
-  const onSubmit = handleSubmit((data) => console.log(data));
-
-  return (
-    <form onSubmit={onSubmit}>
-      <input {...register("firstName")} placeholder="Bill" />
-      {errors?.firstName && <p>{errors.firstName.message}</p>}
-      
-      <input {...register("lastName")} placeholder="Luo" />
-
-      <input type="submit" />
-    </form>
-  );
-}
-`}
-      />
-    ),
-  },
-  submitHandler: {
-    title: "SubmitHandler",
-    description: (
-      <CodeArea
-        rawData={handleSubmitCodeTs}
-        url="https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-z9z0g"
-      />
-    ),
-  },
-  control: {
-    title: "Control",
-    description: (
-      <CodeArea
-        url="https://codesandbox.io/s/control-2mg07"
-        rawData={`import { useForm, useWatch, Control } from "react-hook-form";
-
-type FormValues = {
-  firstName: string;
-  lastName: string;
-};
-
-function IsolateReRender({ control }: { control: Control<FormValues> }) {
-  const firstName = useWatch({
-    control,
-    name: "firstName",
-    defaultValue: "default"
-  });
-
-  return <div>{firstName}</div>;
-}
-
-export default function App() {
-  const { register, control, handleSubmit } = useForm<FormValues>();
-  const onSubmit = handleSubmit((data) => console.log(data));
-
-  return (
-    <form onSubmit={onSubmit}>
-      <input {...register("firstName")} />
-      <input {...register("lastName")} />
-      <IsolateReRender control={control} />
-
-      <input type="submit" />
-    </form>
-  );
-}
-`}
-      />
-    ),
-  },
-  UseFormReturnRef: {
-    title: "UseFormReturn",
-    description: (
-      <TabGroup buttonLabels={["Type", "Code Example"]}>
-        <CodeArea
-          rawData={`export type UseFormReturn<
-  TFieldValues extends FieldValues = FieldValues,
-  TContext = any,
-> = {
-  watch: UseFormWatch<TFieldValues>;
-  getValues: UseFormGetValues<TFieldValues>;
-  getFieldState: UseFormGetFieldState<TFieldValues>;
-  setError: UseFormSetError<TFieldValues>;
-  clearErrors: UseFormClearErrors<TFieldValues>;
-  setValue: UseFormSetValue<TFieldValues>;
-  trigger: UseFormTrigger<TFieldValues>;
-  formState: FormState<TFieldValues>;
-  resetField: UseFormResetField<TFieldValues>;
-  reset: UseFormReset<TFieldValues>;
-  handleSubmit: UseFormHandleSubmit<TFieldValues>;
-  unregister: UseFormUnregister<TFieldValues>;
-  control: Control<TFieldValues, TContext>;
-  register: UseFormRegister<TFieldValues>;
-  setFocus: UseFormSetFocus<TFieldValues>;
-};`}
-        />
-        <CodeArea
-          url="https://codesandbox.io/s/react-hook-form-UseFormReturn-forked-yl40u"
-          rawData={`import type { FieldValues, UseFormReturn, SubmitHandler } from "react-hook-form";
-import React from "react";
-import { useForm } from "react-hook-form";
-
-type InputProps = React.DetailedHTMLProps<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  HTMLInputElement
->;
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => (
-  <input ref={ref} {...props} />
-));
-
-type Option = {
-  label: React.ReactNode;
-  value: string | number | string[];
-};
-
-type SelectProps = React.DetailedHTMLProps<
-  React.SelectHTMLAttributes<HTMLSelectElement>,
-  HTMLSelectElement
-> & { options: Option[] };
-
-const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
-  ({ options, ...props }, ref) => (
-    <select ref={ref} {...props}>
-      {options.map(({ label, value }) => (
-        <option value={value}>{label}</option>
-      ))}
-    </select>
-  )
-);
-
-type FormProps<TFormValues extends FieldValues> = {
-  onSubmit: SubmitHandler<TFormValues>;
-  children: (methods: UseFormReturn<TFormValues>) => React.ReactNode;
-};
-
-const Form = <TFormValues extends FieldValues>({
-  onSubmit,
-  children
-}: FormProps<TFormValues>) => {
-  const methods = useForm<TFormValues>();
-  return (
-    <form onSubmit={methods.handleSubmit(onSubmit)}>{children(methods)}</form>
-  );
-};
-
-type FormValues = {
-  firstName: string;
-  lastName: string;
-  sex: string;
-};
-
-export default function App() {
-  const onSubmit = (data: FormValues) => console.log(data);
-
-  return (
-    <Form<FormValues> onSubmit={onSubmit}>
-      {({ register }) => (
-        <>
-          <Input {...register("firstName")} />
-          <Input {...register("lastName")} />
-          <Select
-            {...register("sex")}
-            options={[
-              { label: "Female", value: "female" },
-              { label: "Male", value: "male" },
-              { label: "Other", value: "other" }
-            ]}
-          />
-          <Input type="submit" />
-        </>
-      )}
-    </Form>
-  );
-}
-`}
-        />
-      </TabGroup>
-    ),
-  },
-  useFormOptions: {
-    title: "UseFormProps",
-    description: (
-      <CodeArea
-        rawData={`export type UseFormProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object
-> = Partial<{
-  mode: Mode;
-  reValidateMode: Mode;
-  defaultValues: DeepPartial<TFieldValues>;
-  resolver: Resolver<TFieldValues, TContext>;
-  context: TContext;
-  shouldFocusError: boolean;
-  shouldUnregister: boolean;
-  criteriaMode: 'firstError' | 'all';
-}>;
-`}
-      />
-    ),
-  },
-  UseFieldArrayProps: {
-    title: "UseFieldArrayProps",
-    description: (
-      <CodeArea
-        rawData={`export type UseFieldArrayProps<
-  TKeyName extends string = 'id',
-  TControl extends Control = Control
-> = {
-  name: string;
-  keyName?: TKeyName;
-  control?: TControl;
-  rules?: Pick<
-    RegisterOptions<TFieldValues>,
-    'maxLength' | 'minLength' | 'validate' | 'required'
-  >;
-};`}
-      />
-    ),
-  },
-  UseFieldArrayReturn: {
-    title: "UseFieldArrayReturn",
-    description: (
-      <CodeArea
-        rawData={`export type UseFieldArrayReturn<
-  TFieldValues extends FieldValues = FieldValues,
-  TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>,
-  TKeyName extends string = 'id',
-> = {
-  swap: (indexA: number, indexB: number) => void;
-  move: (indexA: number, indexB: number) => void;
-  prepend: (
-    value:
-      | Partial<FieldArray<TFieldValues, TFieldArrayName>>
-      | Partial<FieldArray<TFieldValues, TFieldArrayName>>[],
-    options?: FieldArrayMethodProps,
-  ) => void;
-  append: (
-    value:
-      | Partial<FieldArray<TFieldValues, TFieldArrayName>>
-      | Partial<FieldArray<TFieldValues, TFieldArrayName>>[],
-    options?: FieldArrayMethodProps,
-  ) => void;
-  remove: (index?: number | number[]) => void;
-  insert: (
-    index: number,
-    value:
-      | Partial<FieldArray<TFieldValues, TFieldArrayName>>
-      | Partial<FieldArray<TFieldValues, TFieldArrayName>>[],
-    options?: FieldArrayMethodProps,
-  ) => void;
-  update: (
-    index: number,
-    value: Partial<FieldArray<TFieldValues, TFieldArrayName>>,
-  ) => void;
-  replace: (
-    value:
-      | Partial<FieldArray<TFieldValues, TFieldArrayName>>
-      | Partial<FieldArray<TFieldValues, TFieldArrayName>>[],
-  ) => void;
-  fields: FieldArrayWithId<TFieldValues, TFieldArrayName, TKeyName>[];
-};
-  `}
-      />
-    ),
-  },
-  fieldError: {
-    title: "FieldError",
-    description: (
-      <CodeArea
-        rawData={`export type FieldError = {
-  type: string;
-  ref?: Ref;
-  types?: MultipleFieldErrors;
-  message?: Message;
-};
-`}
-      />
-    ),
-  },
-  fieldErrors: {
-    title: "FieldErrors",
-    description: (
-      <CodeArea
-        rawData={`export type FieldErrors<
-  TFieldValues extends FieldValues = FieldValues
-> = DeepMap<TFieldValues, FieldError>;
-`}
-      />
-    ),
-  },
-  field: {
-    title: "Field",
-    description: (
-      <CodeArea
-        rawData={`export type Field = {
-  ref: Ref;
-  mutationWatcher?: MutationWatcher;
-  options?: RadioOrCheckboxOption[];
-} & RegisterOptions;
-`}
-      />
-    ),
-  },
-  fieldPath: {
-    title: "FieldPath",
-    description: (
-      <>
-        <p>
-          This type is useful when you define custom component's{" "}
-          <code>name</code> prop, and it will type check again your field path.
-        </p>
-        <CodeArea rawData="export type FieldPath<TFieldValues extends FieldValues> = Path<TFieldValues>;" />
-      </>
-    ),
-  },
-  fieldPathByValue: {
-    title: "FieldPathByValue",
-    description: (
-      <>
-        <p>
-          This type will return union with all available paths that match the
-          passed value
-        </p>
-        <CodeArea
-          rawData={`function Field<
-  TFieldValues extends FieldValues,
-  TPath extends FieldPathByValue<TFieldValues, Date>
->({
-  control,
-  name
-}: {
-  control: Control<TFieldValues>,
-  name: TPath
-}) {
-  const { field } = useController({
-    control,
-    name,
-  });
-}`}
-        />
-      </>
-    ),
-  },
-  fieldValues: {
-    title: "FieldValues",
-    description: (
-      <CodeArea rawData="export type FieldValues = Record<string, any>;" />
-    ),
-  },
-  mode: {
-    title: "Mode",
-    description: (
-      <CodeArea
-        rawData={`export type Mode = {
-  onBlur: 'onBlur';
-  onChange: 'onChange';
-  onSubmit: 'onSubmit';
-  onTouched: 'onTouched';
-  all: 'all';
-};`}
-      />
-    ),
-  },
-  validationRules: {
-    title: "RegisterOptions",
-    description: (
-      <CodeArea
-        rawData={`export type RegisterOptions = Partial<{
-  required: Message | ValidationRule<boolean>;
-  min: ValidationRule<number | string>;
-  max: ValidationRule<number | string>;
-  maxLength: ValidationRule<number | string>;
-  minLength: ValidationRule<number | string>;
-  pattern: ValidationRule<RegExp>;
-  validate: Validate | Record<string, Validate>;
-}>;
-`}
-      />
-    ),
-  },
-  fieldArrayWithId: {
-    title: "FieldArrayWithId",
-    description: (
-      <CodeArea
-        rawData={`export type FieldArrayWithId<
-  TFieldValues extends FieldValues = FieldValues,
-  TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>,
-  TKeyName extends string = 'id',
-> = FieldArray<TFieldValues, TFieldArrayName> & Record<TKeyName, string>;
-`}
-      />
-    ),
-  },
-  formStateProxy: {
-    title: "FormStateProxy",
-    description: (
-      <CodeArea
-        rawData={`export type FormStateProxy<TFieldValues extends FieldValues = FieldValues> = {
-  isDirty: boolean;
-  dirtyFields: Dirtied<TFieldValues>;
-  isSubmitted: boolean;
-  submitCount: number;
-  touched: FieldNames<TFieldValues>;
-  isSubmitting: boolean;
-  isValid: boolean;
-  errors: FieldErrors<TFieldValues>;
-};
-`}
-      />
-    ),
-  },
-  UseControllerProps: {
-    title: "UseControllerProps",
-    description: (
-      <CodeArea
-        rawData={`export type UseControllerProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> = {
-  name: TName;
-  rules?: Omit<
-    RegisterOptions<TFieldValues, TName>,
-    'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'
-  >;
-  shouldUnregister?: boolean;
-  defaultValue?: FieldPathValue<TFieldValues, TName>;
-  control?: Control<TFieldValues>;
-};
-`}
-      />
-    ),
-  },
-  UseControllerReturn: {
-    title: "UseControllerReturn",
-    description: (
-      <CodeArea
-        rawData={`export type UseControllerReturn<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  field: ControllerRenderProps<TFieldValues, TName>;
-  formState: UseFormStateReturn<TFieldValues>;
-  fieldState: ControllerFieldState;
-};
-`}
-      />
-    ),
-  },
-}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 4f63695a4..93c78f224 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,12 +1,17 @@
 import { StateMachineProvider, createStore } from "little-state-machine"
 import { type AppProps } from "next/app"
 import Head from "next/head"
-
-import "../components/layout.css"
 import formData from "../state/formData"
-import setting from "../state/setting"
 import { ThemeProvider } from "next-themes"
 import { useEffect } from "react"
+import { MDXProvider } from "@mdx-js/react"
+import { MDXComponents } from "../components/mdx/mdx"
+import "../components/layout.css"
+
+const setting = {
+  isFocusOnSearch: false,
+  version: 7,
+}
 
 createStore(
   {
@@ -50,9 +55,11 @@ function App({ Component, pageProps }: AppProps) {
         defaultTheme="dark"
         enableColorScheme={false}
       >
-        <StateMachineProvider>
-          <Component {...pageProps} />
-        </StateMachineProvider>
+        <MDXProvider components={MDXComponents}>
+          <StateMachineProvider>
+            <Component {...pageProps} />
+          </StateMachineProvider>
+        </MDXProvider>
       </ThemeProvider>
     </>
   )
diff --git a/src/pages/advanced-usage.tsx b/src/pages/advanced-usage.tsx
index 693071735..92c1413db 100644
--- a/src/pages/advanced-usage.tsx
+++ b/src/pages/advanced-usage.tsx
@@ -1,17 +1,12 @@
 import Layout from "../components/layout"
 import Seo from "../components/seo"
 import AdvancedUsage from "../components/AdvancedPage"
-import advanced from "../data/advanced"
-import { MDXProvider } from "@mdx-js/react"
-import { MDXComponents } from "../components/mdx/mdx"
 
 const Api = () => {
   return (
     <Layout>
-      <MDXProvider components={MDXComponents}>
-        <Seo title={advanced.title} />
-        <AdvancedUsage />
-      </MDXProvider>
+      <Seo title="Advanced Usage" />
+      <AdvancedUsage />
     </Layout>
   )
 }
diff --git a/src/pages/docs/usecontroller/controller.tsx b/src/pages/docs/usecontroller/controller.tsx
index ed5f38f35..197b3d78f 100644
--- a/src/pages/docs/usecontroller/controller.tsx
+++ b/src/pages/docs/usecontroller/controller.tsx
@@ -1,12 +1,35 @@
 import Seo from "../../../components/seo"
 import Layout from "../../../components/layout"
-import Controller from "../../../components/useController/Controller"
+import Footer from "../../../components/Footer"
+import { Menu } from "../../../components/Menu"
+import StarRepo from "../../../components/StarRepo"
+import containerStyles from "../../../styles/container.module.css"
+import typographyStyles from "../../../styles/typography.module.css"
+import ControllerContent from "../../../content/controller.mdx"
 
 export default function ControllerPage() {
   return (
     <Layout>
       <Seo title="Controller" />
-      <Controller />
+      <div className={containerStyles.container}>
+        <h1 className={typographyStyles.headingWithTopMargin} id="main">
+          Controller
+        </h1>
+        <p className={typographyStyles.subHeading}>
+          Wrapper component for controlled inputs
+        </p>
+
+        <div className={containerStyles.wrapper}>
+          <Menu />
+
+          <main>
+            <ControllerContent />
+            <StarRepo />
+
+            <Footer />
+          </main>
+        </div>
+      </div>
     </Layout>
   )
 }
diff --git a/src/pages/docs/useform.tsx b/src/pages/docs/useform.tsx
index 9febfc5b3..f58fdafb2 100644
--- a/src/pages/docs/useform.tsx
+++ b/src/pages/docs/useform.tsx
@@ -1,16 +1,12 @@
 import Seo from "../../components/seo"
 import Layout from "../../components/layout"
 import UseForm from "../../components/UseForm"
-import { MDXProvider } from "@mdx-js/react"
-import { MDXComponents } from "../../components/mdx/mdx"
 
 export default function UseFormPage() {
   return (
     <Layout>
-      <MDXProvider components={MDXComponents}>
-        <Seo title="useForm" />
-        <UseForm />
-      </MDXProvider>
+      <Seo title="useForm" />
+      <UseForm />
     </Layout>
   )
 }
diff --git a/src/pages/docs/useform/clearerrors.tsx b/src/pages/docs/useform/clearerrors.tsx
index d324f96f8..248d9ed1f 100644
--- a/src/pages/docs/useform/clearerrors.tsx
+++ b/src/pages/docs/useform/clearerrors.tsx
@@ -1,12 +1,33 @@
 import Seo from "../../../components/seo"
 import Layout from "../../../components/layout"
-import ClearErrors from "../../../components/useForm/ClearErrors"
+import Footer from "../../../components/Footer"
+import { Menu } from "../../../components/Menu"
+import StarRepo from "../../../components/StarRepo"
+import containerStyles from "../../../styles/container.module.css"
+import typographyStyles from "../../../styles/typography.module.css"
+import ClearErrorsContent from "../../../content/clear-errors.mdx"
 
 export default function ClearErrorsPage() {
   return (
     <Layout>
       <Seo title="useForm - ClearErrors" />
-      <ClearErrors />
+      <div className={containerStyles.container}>
+        <h1 className={typographyStyles.headingWithTopMargin} id="main">
+          clearErrors
+        </h1>
+        <p className={typographyStyles.subHeading}>Clear form errors</p>
+
+        <div className={containerStyles.wrapper}>
+          <Menu />
+
+          <main>
+            <ClearErrorsContent />
+            <StarRepo />
+
+            <Footer />
+          </main>
+        </div>
+      </div>
     </Layout>
   )
 }
diff --git a/src/pages/docs/useform/control.tsx b/src/pages/docs/useform/control.tsx
index 30a1b9bf8..8777ee48b 100644
--- a/src/pages/docs/useform/control.tsx
+++ b/src/pages/docs/useform/control.tsx
@@ -1,12 +1,33 @@
 import Seo from "../../../components/seo"
 import Layout from "../../../components/layout"
-import Control from "../../../components/useForm/Control"
+import Footer from "../../../components/Footer"
+import { Menu } from "../../../components/Menu"
+import StarRepo from "../../../components/StarRepo"
+import containerStyles from "../../../styles/container.module.css"
+import typographyStyles from "../../../styles/typography.module.css"
+import ControlContent from "../../../content/control.mdx"
 
 export default function ControlPage() {
   return (
     <Layout>
       <Seo title="useForm - control" />
-      <Control />
+      <div className={containerStyles.container}>
+        <h1 className={typographyStyles.headingWithTopMargin} id="main">
+          control
+        </h1>
+        <p className={typographyStyles.subHeading}>Take control of the form</p>
+
+        <div className={containerStyles.wrapper}>
+          <Menu />
+
+          <main>
+            <ControlContent />
+            <StarRepo />
+
+            <Footer />
+          </main>
+        </div>
+      </div>
     </Layout>
   )
 }
diff --git a/src/pages/docs/useform/handlesubmit.tsx b/src/pages/docs/useform/handlesubmit.tsx
index e96fdb707..d629984d2 100644
--- a/src/pages/docs/useform/handlesubmit.tsx
+++ b/src/pages/docs/useform/handlesubmit.tsx
@@ -1,12 +1,36 @@
 import Seo from "../../../components/seo"
 import Layout from "../../../components/layout"
-import HandleSubmit from "../../../components/useForm/HandleSubmit"
+import containerStyles from "../../../styles/container.module.css"
+import typographyStyles from "../../../styles/typography.module.css"
+import Footer from "../../../components/Footer"
+import { Menu } from "../../../components/Menu"
+import StarRepo from "../../../components/StarRepo"
+import HandleSubmitContent from "../../../content/handle-submit.mdx"
 
 const Handlesubmit = () => {
   return (
     <Layout>
       <Seo title="useForm - handleSubmit" />
-      <HandleSubmit />
+      <div className={containerStyles.container}>
+        <h1 className={typographyStyles.headingWithTopMargin} id="main">
+          handleSubmit
+        </h1>
+        <p className={typographyStyles.subHeading}>
+          Ready to send to the server
+        </p>
+
+        <div className={containerStyles.wrapper}>
+          <Menu />
+
+          <main>
+            <HandleSubmitContent />
+
+            <StarRepo />
+
+            <Footer />
+          </main>
+        </div>
+      </div>
     </Layout>
   )
 }
diff --git a/src/pages/docs/useform/reset.tsx b/src/pages/docs/useform/reset.tsx
index ffd112cee..3d01ce9ec 100644
--- a/src/pages/docs/useform/reset.tsx
+++ b/src/pages/docs/useform/reset.tsx
@@ -1,12 +1,35 @@
 import Seo from "../../../components/seo"
 import Layout from "../../../components/layout"
-import Reset from "../../../components/useForm/Reset"
+import Footer from "../../../components/Footer"
+import { Menu } from "../../../components/Menu"
+import StarRepo from "../../../components/StarRepo"
+import containerStyles from "../../../styles/container.module.css"
+import typographyStyles from "../../../styles/typography.module.css"
+import ResetContent from "../../../content/reset.mdx"
 
 const ResetComponent = () => {
   return (
     <Layout>
       <Seo title="useForm - reset" />
-      <Reset />
+      <div className={containerStyles.container}>
+        <h1 className={typographyStyles.headingWithTopMargin} id="main">
+          reset
+        </h1>
+        <p className={typographyStyles.subHeading}>
+          Reset form state and values
+        </p>
+
+        <div className={containerStyles.wrapper}>
+          <Menu />
+
+          <main>
+            <ResetContent />
+            <StarRepo />
+
+            <Footer />
+          </main>
+        </div>
+      </div>
     </Layout>
   )
 }
diff --git a/src/pages/docs/useform/resetfield.tsx b/src/pages/docs/useform/resetfield.tsx
index 998f07063..a97739146 100644
--- a/src/pages/docs/useform/resetfield.tsx
+++ b/src/pages/docs/useform/resetfield.tsx
@@ -1,12 +1,36 @@
 import Seo from "../../../components/seo"
 import Layout from "../../../components/layout"
-import ResetField from "../../../components/useForm/resetField"
+import ResetFieldContent from "../../../content/reset-field.mdx"
+import containerStyles from "../../../styles/container.module.css"
+import typographyStyles from "../../../styles/typography.module.css"
+import Footer from "../../../components/Footer"
+import { Menu } from "../../../components/Menu"
+import StarRepo from "../../../components/StarRepo"
 
 const Resetfield = () => {
   return (
     <Layout>
       <Seo title="useForm - resetField" />
-      <ResetField />
+      <div className={containerStyles.container}>
+        <h1 className={typographyStyles.headingWithTopMargin} id="main">
+          resetField
+        </h1>
+        <p className={typographyStyles.subHeading}>
+          Reset field state and value
+        </p>
+
+        <div className={containerStyles.wrapper}>
+          <Menu />
+
+          <main>
+            <ResetFieldContent />
+
+            <StarRepo />
+
+            <Footer />
+          </main>
+        </div>
+      </div>
     </Layout>
   )
 }
diff --git a/src/pages/docs/useform/setfocus.tsx b/src/pages/docs/useform/setfocus.tsx
index f75f7067d..110ffd451 100644
--- a/src/pages/docs/useform/setfocus.tsx
+++ b/src/pages/docs/useform/setfocus.tsx
@@ -1,12 +1,36 @@
 import Seo from "../../../components/seo"
 import Layout from "../../../components/layout"
-import SetFocus from "../../../components/useForm/SetFocus"
+import containerStyles from "../../../styles/container.module.css"
+import typographyStyles from "../../../styles/typography.module.css"
+import Footer from "../../../components/Footer"
+import { Menu } from "../../../components/Menu"
+import StarRepo from "../../../components/StarRepo"
+import SetFocusContent from "../../../content/set-focus.mdx"
 
 const Setfocus = () => {
   return (
     <Layout>
       <Seo title="useForm - setFocus" />
-      <SetFocus />
+      <div className={containerStyles.container}>
+        <h1 className={typographyStyles.headingWithTopMargin} id="main">
+          setFocus
+        </h1>
+        <p className={typographyStyles.subHeading}>
+          Manually set an input focus
+        </p>
+
+        <div className={containerStyles.wrapper}>
+          <Menu />
+
+          <main>
+            <SetFocusContent />
+
+            <StarRepo />
+
+            <Footer />
+          </main>
+        </div>
+      </div>
     </Layout>
   )
 }
diff --git a/src/pages/docs/useform/unregister.tsx b/src/pages/docs/useform/unregister.tsx
index 8b5a82ea6..9a883a692 100644
--- a/src/pages/docs/useform/unregister.tsx
+++ b/src/pages/docs/useform/unregister.tsx
@@ -1,12 +1,35 @@
 import Seo from "../../../components/seo"
 import Layout from "../../../components/layout"
-import UnRegister from "../../../components/useForm/UnRegister"
+import StarRepo from "../../../components/StarRepo"
+import containerStyles from "../../../styles/container.module.css"
+import typographyStyles from "../../../styles/typography.module.css"
+import UnregisterContent from "../../../content/unregister.mdx"
+import Footer from "../../../components/Footer"
+import { Menu } from "../../../components/Menu"
 
 const Unregister = () => {
   return (
     <Layout>
       <Seo title="useForm - unregister" />
-      <UnRegister />
+      <div className={containerStyles.container}>
+        <h1 className={typographyStyles.headingWithTopMargin} id="main">
+          unregister
+        </h1>
+        <p className={typographyStyles.subHeading}>
+          Unregister uncontrolled/controlled inputs
+        </p>
+
+        <div className={containerStyles.wrapper}>
+          <Menu />
+
+          <main>
+            <UnregisterContent />
+            <StarRepo />
+
+            <Footer />
+          </main>
+        </div>
+      </div>
     </Layout>
   )
 }
diff --git a/src/pages/docs/useform/watch.tsx b/src/pages/docs/useform/watch.tsx
index bfe53e979..9d937a25d 100644
--- a/src/pages/docs/useform/watch.tsx
+++ b/src/pages/docs/useform/watch.tsx
@@ -1,12 +1,33 @@
 import Seo from "../../../components/seo"
 import Layout from "../../../components/layout"
-import Watch from "../../../components/useForm/Watch"
+import containerStyles from "../../../styles/container.module.css"
+import typographyStyles from "../../../styles/typography.module.css"
+import WatchContent from "../../../content/watch.mdx"
+import Footer from "../../../components/Footer"
+import { Menu } from "../../../components/Menu"
 
 const WatchComponent = () => {
   return (
     <Layout>
       <Seo title="useForm - watch" />
-      <Watch />
+      <div className={containerStyles.container}>
+        <h1 className={typographyStyles.headingWithTopMargin} id="main">
+          watch
+        </h1>
+        <p className={typographyStyles.subHeading}>
+          Subscribe to input changes
+        </p>
+
+        <div className={containerStyles.wrapper}>
+          <Menu />
+
+          <main>
+            <WatchContent />
+
+            <Footer />
+          </main>
+        </div>
+      </div>
     </Layout>
   )
 }
diff --git a/src/pages/docs/useformcontext.tsx b/src/pages/docs/useformcontext.tsx
index 8a572d50d..fb43532eb 100644
--- a/src/pages/docs/useformcontext.tsx
+++ b/src/pages/docs/useformcontext.tsx
@@ -1,12 +1,35 @@
 import Seo from "../../components/seo"
 import Layout from "../../components/layout"
-import UseFormContext from "../../components/UseFormContext"
+import Footer from "../../components/Footer"
+import { Menu } from "../../components/Menu"
+import StarRepo from "../../components/StarRepo"
+import containerStyles from "../../styles/container.module.css"
+import typographyStyles from "../../styles/typography.module.css"
+import UseFormContextContent from "../../content/use-form-context.mdx"
 
 const Useformcontext = () => {
   return (
     <Layout>
       <Seo title="useFormContext" />
-      <UseFormContext />
+      <div className={containerStyles.container}>
+        <h1 className={typographyStyles.headingWithTopMargin} id="main">
+          useFormContext
+        </h1>
+        <p className={typographyStyles.subHeading}>
+          React Context API for hook form
+        </p>
+
+        <div className={containerStyles.wrapper}>
+          <Menu />
+
+          <main>
+            <UseFormContextContent />
+            <StarRepo />
+
+            <Footer />
+          </main>
+        </div>
+      </div>
     </Layout>
   )
 }
diff --git a/src/pages/faqs.tsx b/src/pages/faqs.tsx
index 4f6e5b426..c975b78e1 100644
--- a/src/pages/faqs.tsx
+++ b/src/pages/faqs.tsx
@@ -1,16 +1,11 @@
 import Layout from "../components/layout"
 import Seo from "../components/seo"
 import FaqPage from "../components/FaqPage"
-import faq from "../data/faq"
-import { MDXProvider } from "@mdx-js/react"
-import { MDXComponents } from "../components/mdx/mdx"
 
 const Faq = () => (
   <Layout>
-    <MDXProvider components={MDXComponents}>
-      <Seo title={faq.title} />
-      <FaqPage />
-    </MDXProvider>
+    <Seo title="FAQs" />
+    <FaqPage />
   </Layout>
 )
 
diff --git a/src/pages/get-started.tsx b/src/pages/get-started.tsx
index cca74c1a4..c7acca05b 100644
--- a/src/pages/get-started.tsx
+++ b/src/pages/get-started.tsx
@@ -2,15 +2,11 @@ import Layout from "../components/layout"
 import Seo from "../components/seo"
 import GetStartedPage from "../components/GetStartedPage"
 import getStarted from "../data/getStarted"
-import { MDXProvider } from "@mdx-js/react"
-import { MDXComponents } from "../components/mdx/mdx"
 
 const GetStarted = () => (
   <Layout>
-    <MDXProvider components={MDXComponents}>
-      <Seo title={getStarted.title} />
-      <GetStartedPage />
-    </MDXProvider>
+    <Seo title={getStarted.title} />
+    <GetStartedPage />
   </Layout>
 )
 
diff --git a/src/pages/ts.tsx b/src/pages/ts.tsx
index d7bd48658..6f2772f8c 100644
--- a/src/pages/ts.tsx
+++ b/src/pages/ts.tsx
@@ -1,16 +1,12 @@
 import Seo from "../components/seo"
 import Layout from "../components/layout"
 import TsPage from "../components/tsPage"
-import { MDXProvider } from "@mdx-js/react"
-import { MDXComponents } from "../components/mdx/mdx"
 
 const Ts = () => {
   return (
     <Layout>
-      <MDXProvider components={MDXComponents}>
-        <Seo title="TS Support" />
-        <TsPage />
-      </MDXProvider>
+      <Seo title="TS Support" />
+      <TsPage />
     </Layout>
   )
 }
diff --git a/src/state/setting.ts b/src/state/setting.ts
deleted file mode 100644
index b9da8db18..000000000
--- a/src/state/setting.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export default {
-  isFocusOnSearch: false,
-  version: 7,
-}
diff --git a/tsconfig.json b/tsconfig.json
index 2d260d2e2..4abc36372 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
     "target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
-    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+    "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
     "lib": [
       "dom",
       "es2017",
diff --git a/yarn.lock b/yarn.lock
index 29fc4c9d9..0d0c1f642 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -35,7 +35,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/runtime@^7.20.7", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2":
+"@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2":
   version "7.22.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.3.tgz#0a7fce51d43adbf0f7b517a71f4c3aaca92ebcbb"
   integrity sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==
@@ -865,31 +865,16 @@ character-entities-html4@^2.0.0:
   resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-2.1.0.tgz#1f1adb940c971a4b22ba39ddca6b618dc6e56b2b"
   integrity sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==
 
-character-entities-legacy@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
-  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
-
 character-entities-legacy@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz#76bc83a90738901d7bc223a9e93759fdd560125b"
   integrity sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==
 
-character-entities@^1.0.0:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
-  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
-
 character-entities@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
   integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
 
-character-reference-invalid@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
-  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
-
 character-reference-invalid@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
@@ -900,6 +885,13 @@ ci-info@^2.0.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 
+class-variance-authority@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/class-variance-authority/-/class-variance-authority-0.6.0.tgz#d10df1ee148bb8efc11c17909ef1567abdc85a03"
+  integrity sha512-qdRDgfjx3GRb9fpwpSvn+YaidnT7IUJNe4wt5/SWwM+PmUwJUhQRk/8zAyNro0PmVfmen2635UboTjIBXXxy5A==
+  dependencies:
+    clsx "1.2.1"
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -925,7 +917,7 @@ client-only@0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
-clsx@^1.2.1:
+clsx@1.2.1, clsx@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
@@ -959,11 +951,6 @@ colorette@^2.0.16:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
 
-comma-separated-tokens@^1.0.0:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
-  integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
-
 comma-separated-tokens@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz#4e89c9458acb61bc8fef19f4529973b2392839ee"
@@ -1659,13 +1646,6 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
-fault@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
-  integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
-  dependencies:
-    format "^0.2.0"
-
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -1720,11 +1700,6 @@ for-each@^0.3.3:
   dependencies:
     is-callable "^1.1.3"
 
-format@^0.2.0:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
-  integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
-
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -1947,11 +1922,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hast-util-parse-selector@^2.0.0:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz#d57c23f4da16ae3c63b3b6ca4616683313499c3a"
-  integrity sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==
-
 hast-util-to-estree@^2.0.0:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/hast-util-to-estree/-/hast-util-to-estree-2.3.3.tgz#da60142ffe19a6296923ec222aba73339c8bf470"
@@ -1978,22 +1948,6 @@ hast-util-whitespace@^2.0.0:
   resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz#0ec64e257e6fc216c7d14c8a1b74d27d650b4557"
   integrity sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==
 
-hastscript@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-6.0.0.tgz#e8768d7eac56c3fdeac8a92830d58e811e5bf640"
-  integrity sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==
-  dependencies:
-    "@types/hast" "^2.0.0"
-    comma-separated-tokens "^1.0.0"
-    hast-util-parse-selector "^2.0.0"
-    property-information "^5.0.0"
-    space-separated-tokens "^1.0.0"
-
-highlight.js@^10.4.1, highlight.js@~10.7.0:
-  version "10.7.3"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
-  integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
-
 human-signals@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
@@ -2075,24 +2029,11 @@ internal-slot@^1.0.3, internal-slot@^1.0.4, internal-slot@^1.0.5:
     has "^1.0.3"
     side-channel "^1.0.4"
 
-is-alphabetical@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
-  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
-
 is-alphabetical@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-2.0.1.tgz#01072053ea7c1036df3c7d19a6daaec7f19e789b"
   integrity sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==
 
-is-alphanumerical@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
-  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
-  dependencies:
-    is-alphabetical "^1.0.0"
-    is-decimal "^1.0.0"
-
 is-alphanumerical@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz#7c03fbe96e3e931113e57f964b0a368cc2dfd875"
@@ -2162,11 +2103,6 @@ is-date-object@^1.0.1, is-date-object@^1.0.5:
   dependencies:
     has-tostringtag "^1.0.0"
 
-is-decimal@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
-  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
-
 is-decimal@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-2.0.1.tgz#9469d2dc190d0214fd87d78b78caecc0cc14eef7"
@@ -2199,11 +2135,6 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3:
   dependencies:
     is-extglob "^2.1.1"
 
-is-hexadecimal@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
-  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
-
 is-hexadecimal@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz#86b5bf668fca307498d319dfc03289d781a90027"
@@ -2526,14 +2457,6 @@ loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-lowlight@^1.17.0:
-  version "1.20.0"
-  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.20.0.tgz#ddb197d33462ad0d93bf19d17b6c301aa3941888"
-  integrity sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==
-  dependencies:
-    fault "^1.0.0"
-    highlight.js "~10.7.0"
-
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
@@ -3397,18 +3320,6 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
-parse-entities@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
-  integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
-  dependencies:
-    character-entities "^1.0.0"
-    character-entities-legacy "^1.0.0"
-    character-reference-invalid "^1.0.0"
-    is-alphanumerical "^1.0.0"
-    is-decimal "^1.0.0"
-    is-hexadecimal "^1.0.0"
-
 parse-entities@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-4.0.1.tgz#4e2a01111fb1c986549b944af39eeda258fc9e4e"
@@ -3523,17 +3434,12 @@ prism-react-renderer@^2.0.4:
     "@types/prismjs" "^1.26.0"
     clsx "^1.2.1"
 
-prismjs@^1.27.0, prismjs@^1.29.0:
+prismjs@^1.29.0:
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
   integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
 
-prismjs@~1.27.0:
-  version "1.27.0"
-  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
-  integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
-
-prop-types@>=15.0.0, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@>=15.0.0, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -3542,13 +3448,6 @@ prop-types@>=15.0.0, prop-types@^15.7.2, prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
-property-information@^5.0.0:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
-  integrity sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==
-  dependencies:
-    xtend "^4.0.0"
-
 property-information@^6.0.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.2.0.tgz#b74f522c31c097b5149e3c3cb8d7f3defd986a1d"
@@ -3580,11 +3479,6 @@ react-dom@18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-fast-compare@^3.1.1:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
-  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
-
 react-github-btn@1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/react-github-btn/-/react-github-btn-1.4.0.tgz#92654107e92658e60dd977c7a92b212f806da78d"
@@ -3592,16 +3486,6 @@ react-github-btn@1.4.0:
   dependencies:
     github-buttons "^2.22.0"
 
-react-helmet@6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
-  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
-  dependencies:
-    object-assign "^4.1.1"
-    prop-types "^15.7.2"
-    react-fast-compare "^3.1.1"
-    react-side-effect "^2.1.0"
-
 react-hook-form@6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.0.0.tgz#b51faa638aadfa3d4d9758dc1f8d0f67c2b1aa97"
@@ -3612,11 +3496,6 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-side-effect@^2.1.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.2.tgz#dc6345b9e8f9906dc2eeb68700b615e0b4fe752a"
-  integrity sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==
-
 react-simple-animate@^3.3.8, react-simple-animate@^3.5.2:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-3.5.2.tgz#ab08865c8bd47872b92bd1e25902326bf7c695b3"
@@ -3634,17 +3513,6 @@ react-sortablejs@1.5.1:
   dependencies:
     prop-types ">=15.0.0"
 
-react-syntax-highlighter@^15.5.0:
-  version "15.5.0"
-  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20"
-  integrity sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    highlight.js "^10.4.1"
-    lowlight "^1.17.0"
-    prismjs "^1.27.0"
-    refractor "^3.6.0"
-
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -3652,15 +3520,6 @@ react@18.2.0:
   dependencies:
     loose-envify "^1.1.0"
 
-refractor@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a"
-  integrity sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==
-  dependencies:
-    hastscript "^6.0.0"
-    parse-entities "^2.0.0"
-    prismjs "~1.27.0"
-
 regenerator-runtime@^0.13.11:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
@@ -3944,11 +3803,6 @@ source-map@^0.7.0:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
   integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
 
-space-separated-tokens@^1.0.0:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
-  integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
-
 space-separated-tokens@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz#1ecd9d2350a3844572c3f4a312bceb018348859f"
@@ -4425,11 +4279,6 @@ ws@^7.3.1:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
   integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
 
-xtend@^4.0.0:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
-  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
-
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"

From 004148dffd9372e2159e17a2ad0bf188f507f251 Mon Sep 17 00:00:00 2001
From: Lucas <aranlucas@gmail.com>
Date: Mon, 5 Jun 2023 17:21:00 -0700
Subject: [PATCH 2/5] fix: consolidating to single menu

---
 src/components/AdvancedPage.tsx               |  51 +--
 src/components/ClipBoard.tsx                  |  15 +-
 src/components/ErrorMessage.tsx               |   4 +-
 src/components/FaqPage.tsx                    |  55 +---
 src/components/GetStartedPage.tsx             |  59 +---
 src/components/Menu.tsx                       | 139 --------
 src/components/Menu/Menu.tsx                  |  72 +++++
 src/components/Menu/MenuLinks.ts              | 296 ++++++++++++++++++
 src/components/{ => Menu}/SideMenu.module.css |   0
 src/components/Menu/index.ts                  |  10 +
 src/components/NewSideMenu.tsx                |  70 -----
 src/components/UseController.tsx              |   4 +-
 src/components/UseFieldArray.tsx              |   4 +-
 src/components/UseForm.tsx                    |   4 +-
 src/components/UseFormState.tsx               |   4 +-
 src/components/UseWatch.tsx                   |   4 +-
 src/components/tsPage.tsx                     |  83 +----
 src/components/useForm/FormState.tsx          |   4 +-
 src/components/useForm/GetFieldState.tsx      |   4 +-
 src/components/useForm/GetValues.tsx          |   4 +-
 src/components/useForm/Register.tsx           |   4 +-
 src/components/useForm/SetError.tsx           |   4 +-
 src/components/useForm/SetValue.tsx           |   4 +-
 src/components/useForm/Trigger.tsx            |   4 +-
 src/content/unregister.mdx                    |   4 +-
 src/pages/docs/formprovider.tsx               |   4 +-
 src/pages/docs/usecontroller/controller.tsx   |   4 +-
 src/pages/docs/useform/clearerrors.tsx        |   4 +-
 src/pages/docs/useform/control.tsx            |   4 +-
 src/pages/docs/useform/form.tsx               |   4 +-
 src/pages/docs/useform/handlesubmit.tsx       |   4 +-
 src/pages/docs/useform/reset.tsx              |   4 +-
 src/pages/docs/useform/resetfield.tsx         |   8 +-
 src/pages/docs/useform/setfocus.tsx           |   4 +-
 src/pages/docs/useform/unregister.tsx         |   4 +-
 src/pages/docs/useform/watch.tsx              |   4 +-
 src/pages/docs/useformcontext.tsx             |   8 +-
 src/types/types.ts                            |   8 +
 38 files changed, 459 insertions(+), 511 deletions(-)
 delete mode 100644 src/components/Menu.tsx
 create mode 100644 src/components/Menu/Menu.tsx
 create mode 100644 src/components/Menu/MenuLinks.ts
 rename src/components/{ => Menu}/SideMenu.module.css (100%)
 create mode 100644 src/components/Menu/index.ts
 delete mode 100644 src/components/NewSideMenu.tsx
 create mode 100644 src/types/types.ts

diff --git a/src/components/AdvancedPage.tsx b/src/components/AdvancedPage.tsx
index 8d56dfa8f..b129d0ec2 100644
--- a/src/components/AdvancedPage.tsx
+++ b/src/components/AdvancedPage.tsx
@@ -3,54 +3,7 @@ import StarRepo from "./StarRepo"
 import typographyStyles from "../styles/typography.module.css"
 import containerStyles from "../styles/container.module.css"
 import AdvancedContent, { meta } from "../content/advanced.mdx"
-import NewSideMenu from "./NewSideMenu"
-
-const links = [
-  {
-    title: "Accessibility (A11y)",
-    href: "#AccessibilityA11y",
-  },
-  {
-    title: "Wizard Form / Funnel",
-    href: "#WizardFormFunnel",
-  },
-  {
-    title: "Smart Form Component",
-    href: "#SmartFormComponent",
-  },
-  {
-    title: "Error Messages",
-    href: "#ErrorMessages",
-  },
-  {
-    title: "Connect Form",
-    href: "#ConnectForm",
-  },
-  {
-    title: "FormProvider Performance",
-    href: "#FormProviderPerformance",
-  },
-  {
-    title: "Controlled mixed with Uncontrolled Components",
-    href: "#ControlledmixedwithUncontrolledComponents",
-  },
-  {
-    title: "Custom Hook with Resolver",
-    href: "#CustomHookwithResolver",
-  },
-  {
-    title: "Working with virtualized lists",
-    href: "#Workingwithvirtualizedlists",
-  },
-  {
-    title: "Testing Form",
-    href: "#TestingForm",
-  },
-  {
-    title: "Transform and Parse",
-    href: "#TransformandParse",
-  },
-]
+import { Menu, advancedLinks } from "./Menu"
 
 function Advanced() {
   return (
@@ -61,7 +14,7 @@ function Advanced() {
       <p className={typographyStyles.subHeading}>{meta.description}</p>
 
       <div className={containerStyles.wrapper}>
-        <NewSideMenu links={links} />
+        <Menu pages={advancedLinks} />
 
         <main>
           <AdvancedContent />
diff --git a/src/components/ClipBoard.tsx b/src/components/ClipBoard.tsx
index 9e625d62c..1144e357d 100644
--- a/src/components/ClipBoard.tsx
+++ b/src/components/ClipBoard.tsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import generic from "../data/generic"
 
 const ClipBoard = ({
@@ -9,16 +9,17 @@ const ClipBoard = ({
   className?: string
 }) => {
   const [copiedCode, setCopiedCode] = useState<boolean>(false)
-  const timer = useRef(null)
 
   useEffect(() => {
-    if (copiedCode) {
-      timer.current = setTimeout(() => {
-        setCopiedCode(false)
-      }, 3000)
+    if (!copiedCode) {
+      return
     }
 
-    return () => clearTimeout(timer.current)
+    const timerId = setTimeout(() => {
+      setCopiedCode(false)
+    }, 3000)
+
+    return () => clearTimeout(timerId)
   }, [copiedCode])
 
   return (
diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index fbbbca07e..47a931800 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -7,10 +7,10 @@ import typographyStyles from "../styles/typography.module.css"
 import tableStyles from "../styles/table.module.css"
 import errorMessageTs from "./codeExamples/errorMessageTs"
 import errorsMessageTs from "./codeExamples/errorsMessageTs"
-import { Menu } from "./Menu"
 import containerStyles from "../styles/container.module.css"
 import Footer from "./Footer"
 import StarRepo from "./StarRepo"
+import { Menu, apiLinks } from "./Menu"
 
 export default function ErrorMessage({ api }: { api: any }) {
   return (
@@ -23,7 +23,7 @@ export default function ErrorMessage({ api }: { api: any }) {
       </p>
 
       <div className={containerStyles.wrapper}>
-        <Menu />
+        <Menu pages={apiLinks} />
 
         <main>
           <section>
diff --git a/src/components/FaqPage.tsx b/src/components/FaqPage.tsx
index 1e7d1e0e3..c977e7642 100644
--- a/src/components/FaqPage.tsx
+++ b/src/components/FaqPage.tsx
@@ -3,58 +3,7 @@ import StarRepo from "../components/StarRepo"
 import typographyStyles from "../styles/typography.module.css"
 import containerStyles from "../styles/container.module.css"
 import FAQContent, { meta } from "../content/faq.mdx"
-import NewSideMenu from "./NewSideMenu"
-
-const links = [
-  {
-    title: "Performance of React Hook Form",
-    href: "#PerformanceofReactHookForm",
-  },
-  {
-    title: "How to create an accessible input error and message?",
-    href: "#Howtocreateanaccessibleinputerrorandmessage",
-  },
-  {
-    title: "Does it work with Class Components?",
-    href: "#DoesitworkwithClassComponents",
-  },
-  {
-    title: "How to reset the form?",
-    href: "#Howtoresettheform",
-  },
-  {
-    title: "How to initialize form values?",
-    href: "#Howtoinitializeformvalues",
-  },
-  {
-    title: "How to share ref usage?",
-    href: "#Howtosharerefusage",
-  },
-  {
-    title: "What if you don't have access to ref?",
-    href: "#Whatifyoudonthaveaccesstoref",
-  },
-  {
-    title: "Why is the first keystroke not working?",
-    href: "#Whyisthefirstkeystrokenotworking",
-  },
-  {
-    title: "React Hook Form, Formik or Redux Form?",
-    href: "#ReactHookFormFormikorReduxForm",
-  },
-  {
-    title: "watch vs getValues vs state",
-    href: "#watchvsgetValuesvsstate",
-  },
-  {
-    title: "Why is default value not changing correctly with ternary operator?",
-    href: "#Whyisdefaultvaluenotchangingcorrectlywithternaryoperator",
-  },
-  {
-    title: "How to work with modal or tab forms?",
-    href: "#Howtoworkwithmodalortabforms",
-  },
-]
+import { Menu, faqLinks } from "./Menu"
 
 const Faq = () => {
   return (
@@ -65,7 +14,7 @@ const Faq = () => {
       <p className={typographyStyles.subHeading}>{meta.description}</p>
 
       <div className={containerStyles.wrapper}>
-        <NewSideMenu links={links} />
+        <Menu pages={faqLinks} />
 
         <main>
           <FAQContent />
diff --git a/src/components/GetStartedPage.tsx b/src/components/GetStartedPage.tsx
index 6700ac3c5..5ff78f8d8 100644
--- a/src/components/GetStartedPage.tsx
+++ b/src/components/GetStartedPage.tsx
@@ -2,63 +2,8 @@ import LearnMore from "../components/learnMore"
 import Footer from "../components/Footer"
 import typographyStyles from "../styles/typography.module.css"
 import containerStyles from "../styles/container.module.css"
-import NewSideMenu from "./NewSideMenu"
 import GetStartedContent, { meta } from "../content/get-started.mdx"
-
-const links = [
-  {
-    title: "Quick start",
-    href: "#Quickstart",
-  },
-  {
-    title: "React Web Video Tutorial",
-    href: "#ReactWebVideoTutorial",
-  },
-  {
-    title: "Register fields",
-    href: "#Registerfields",
-  },
-  {
-    title: "Apply validation",
-    href: "#Applyvalidation",
-  },
-  {
-    title: "Integrating an existing form",
-    href: "#Integratinganexistingform",
-  },
-  {
-    title: "Integrating with UI libraries",
-    href: "#IntegratingwithUIlibraries",
-  },
-  {
-    title: "Integrating Controlled Inputs",
-    href: "#IntegratingControlledInputs",
-  },
-  {
-    title: "Integrating with global state",
-    href: "#Integratingwithglobalstate",
-  },
-  {
-    title: "Handle errors",
-    href: "#Handleerrors",
-  },
-  {
-    title: "Schema Validation",
-    href: "#SchemaValidation",
-  },
-  {
-    title: "React Native",
-    href: "#ReactNative",
-  },
-  {
-    title: "TypeScript",
-    href: "#TypeScript",
-  },
-  {
-    title: "Design and philosophy",
-    href: "#Designandphilosophy",
-  },
-]
+import { Menu, getStartedLinks } from "./Menu"
 
 const GetStartedPage = () => {
   return (
@@ -69,7 +14,7 @@ const GetStartedPage = () => {
       <p className={typographyStyles.subHeading}>{meta.description}</p>
 
       <div className={containerStyles.wrapper}>
-        <NewSideMenu links={links} />
+        <Menu pages={getStartedLinks} />
 
         <main>
           <GetStartedContent />
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
deleted file mode 100644
index d8164e5da..000000000
--- a/src/components/Menu.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import Link from "next/link"
-import colors from "../styles/colors"
-import styles from "./SideMenu.module.css"
-import typographyStyles from "../styles/typography.module.css"
-import { useRouter } from "next/router"
-
-export const pages = [
-  {
-    pathname: "/docs/useform",
-    name: "useForm",
-    pages: [
-      { pathname: "/docs/useform/register", name: "register" },
-      { pathname: "/docs/useform/unregister", name: "unregister" },
-      { pathname: "/docs/useform/formstate", name: "formState" },
-      { pathname: "/docs/useform/watch", name: "watch" },
-      { pathname: "/docs/useform/handlesubmit", name: "handleSubmit" },
-      { pathname: "/docs/useform/reset", name: "reset" },
-      { pathname: "/docs/useform/resetfield", name: "resetField" },
-      { pathname: "/docs/useform/seterror", name: "setError" },
-      { pathname: "/docs/useform/clearerrors", name: "clearErrors" },
-      { pathname: "/docs/useform/setvalue", name: "setValue" },
-      { pathname: "/docs/useform/setfocus", name: "setFocus" },
-      { pathname: "/docs/useform/getvalues", name: "getValues" },
-      { pathname: "/docs/useform/getfieldstate", name: "getFieldState" },
-      { pathname: "/docs/useform/trigger", name: "trigger" },
-      { pathname: "/docs/useform/control", name: "control" },
-      { pathname: "/docs/useform/form", name: "Form" },
-    ],
-  },
-  {
-    pathname: "/docs/usecontroller",
-    name: "useController",
-    pages: [
-      {
-        pathname: "/docs/usecontroller/controller",
-        name: "Controller",
-      },
-    ],
-  },
-  {
-    pathname: "/docs/useformcontext",
-    name: "useFormContext",
-    pages: [
-      {
-        pathname: "/docs/formprovider",
-        name: "FormProvider",
-      },
-    ],
-  },
-  {
-    pathname: "/docs/usewatch",
-    name: "useWatch",
-  },
-  {
-    pathname: "/docs/useformstate",
-    name: "useFormState",
-    pages: [
-      {
-        pathname: "/docs/useformstate/errormessage",
-        name: "ErrorMessage",
-      },
-    ],
-  },
-  {
-    pathname: "/docs/usefieldarray",
-    name: "useFieldArray",
-  },
-]
-
-function Menu() {
-  const router = useRouter()
-  const { pathname } = router
-
-  return (
-    <aside className={styles.menu}>
-      <div>
-        <div className={styles.titleList}>
-          <h4
-            className={typographyStyles.title}
-            style={{
-              fontSize: 16,
-              color: colors.lightBlue,
-            }}
-          >
-            Menu
-          </h4>
-        </div>
-
-        <ul
-          className="scrollArea"
-          style={{
-            paddingBottom: 40,
-          }}
-        >
-          {pages.map((page) => {
-            const isActive = pathname === page.pathname
-
-            return (
-              <li key={page.pathname} className={styles.menuItem}>
-                <code aria-hidden className={styles.code}>{`</>`}</code>
-                <Link
-                  className={isActive ? styles.isActive : ""}
-                  href={page.pathname}
-                >
-                  {page.name}
-                </Link>
-
-                {page.pages && (
-                  <ul>
-                    {page.pages.map((page) => {
-                      const isActive = pathname === page.pathname
-
-                      return (
-                        <li key={page.pathname} className={styles.menuItem}>
-                          <code
-                            aria-hidden
-                            className={styles.code}
-                          >{`</>`}</code>{" "}
-                          <Link
-                            className={isActive ? styles.isActive : ""}
-                            href={page.pathname}
-                          >
-                            {page.name}
-                          </Link>
-                        </li>
-                      )
-                    })}
-                  </ul>
-                )}
-              </li>
-            )
-          })}
-        </ul>
-      </div>
-    </aside>
-  )
-}
-
-export { Menu }
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
new file mode 100644
index 000000000..5654c2e33
--- /dev/null
+++ b/src/components/Menu/Menu.tsx
@@ -0,0 +1,72 @@
+import Link from "next/link"
+import colors from "../../styles/colors"
+import styles from "./SideMenu.module.css"
+import typographyStyles from "../../styles/typography.module.css"
+import { useRouter } from "next/router"
+import { Pages } from "../../types/types"
+
+function Menu({ pages }: { pages: Pages }) {
+  const router = useRouter()
+  const { pathname } = router
+
+  return (
+    <aside className={styles.menu}>
+      <div>
+        <div className={styles.titleList}>
+          <h4
+            className={typographyStyles.title}
+            style={{
+              fontSize: 16,
+              color: colors.lightBlue,
+            }}
+          >
+            Menu
+          </h4>
+        </div>
+
+        <ul className="scrollArea">
+          {pages.map((page) => {
+            const isActive = pathname === page.pathname
+
+            return (
+              <li key={page.pathname} className={styles.menuItem}>
+                <code aria-hidden className={styles.code}>{`</>`}</code>
+                <Link
+                  className={isActive ? styles.isActive : ""}
+                  href={page.pathname}
+                >
+                  {page.name}
+                </Link>
+
+                {page?.pages && (
+                  <ul>
+                    {page.pages.map((page) => {
+                      const isActive = pathname === page.pathname
+
+                      return (
+                        <li key={page.pathname} className={styles.menuItem}>
+                          <code
+                            aria-hidden
+                            className={styles.code}
+                          >{`</>`}</code>{" "}
+                          <Link
+                            className={isActive ? styles.isActive : ""}
+                            href={page.pathname}
+                          >
+                            {page.name}
+                          </Link>
+                        </li>
+                      )
+                    })}
+                  </ul>
+                )}
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </aside>
+  )
+}
+
+export default Menu
diff --git a/src/components/Menu/MenuLinks.ts b/src/components/Menu/MenuLinks.ts
new file mode 100644
index 000000000..6fad78c63
--- /dev/null
+++ b/src/components/Menu/MenuLinks.ts
@@ -0,0 +1,296 @@
+import { Pages } from "../../types/types"
+
+export const advancedLinks: Pages = [
+  {
+    name: "Accessibility (A11y)",
+    pathname: "#AccessibilityA11y",
+  },
+  {
+    name: "Wizard Form / Funnel",
+    pathname: "#WizardFormFunnel",
+  },
+  {
+    name: "Smart Form Component",
+    pathname: "#SmartFormComponent",
+  },
+  {
+    name: "Error Messages",
+    pathname: "#ErrorMessages",
+  },
+  {
+    name: "Connect Form",
+    pathname: "#ConnectForm",
+  },
+  {
+    name: "FormProvider Performance",
+    pathname: "#FormProviderPerformance",
+  },
+  {
+    name: "Controlled mixed with Uncontrolled Components",
+    pathname: "#ControlledmixedwithUncontrolledComponents",
+  },
+  {
+    name: "Custom Hook with Resolver",
+    pathname: "#CustomHookwithResolver",
+  },
+  {
+    name: "Working with virtualized lists",
+    pathname: "#Workingwithvirtualizedlists",
+  },
+  {
+    name: "Testing Form",
+    pathname: "#TestingForm",
+  },
+  {
+    name: "Transform and Parse",
+    pathname: "#TransformandParse",
+  },
+]
+
+export const faqLinks: Pages = [
+  {
+    name: "Performance of React Hook Form",
+    pathname: "#PerformanceofReactHookForm",
+  },
+  {
+    name: "How to create an accessible input error and message?",
+    pathname: "#Howtocreateanaccessibleinputerrorandmessage",
+  },
+  {
+    name: "Does it work with Class Components?",
+    pathname: "#DoesitworkwithClassComponents",
+  },
+  {
+    name: "How to reset the form?",
+    pathname: "#Howtoresettheform",
+  },
+  {
+    name: "How to initialize form values?",
+    pathname: "#Howtoinitializeformvalues",
+  },
+  {
+    name: "How to share ref usage?",
+    pathname: "#Howtosharerefusage",
+  },
+  {
+    name: "What if you don't have access to ref?",
+    pathname: "#Whatifyoudonthaveaccesstoref",
+  },
+  {
+    name: "Why is the first keystroke not working?",
+    pathname: "#Whyisthefirstkeystrokenotworking",
+  },
+  {
+    name: "React Hook Form, Formik or Redux Form?",
+    pathname: "#ReactHookFormFormikorReduxForm",
+  },
+  {
+    name: "watch vs getValues vs state",
+    pathname: "#watchvsgetValuesvsstate",
+  },
+  {
+    name: "Why is default value not changing correctly with ternary operator?",
+    pathname: "#Whyisdefaultvaluenotchangingcorrectlywithternaryoperator",
+  },
+  {
+    name: "How to work with modal or tab forms?",
+    pathname: "#Howtoworkwithmodalortabforms",
+  },
+]
+
+export const apiLinks: Pages = [
+  {
+    pathname: "/docs/useform",
+    name: "useForm",
+    pages: [
+      { pathname: "/docs/useform/register", name: "register" },
+      { pathname: "/docs/useform/unregister", name: "unregister" },
+      { pathname: "/docs/useform/formstate", name: "formState" },
+      { pathname: "/docs/useform/watch", name: "watch" },
+      { pathname: "/docs/useform/handlesubmit", name: "handleSubmit" },
+      { pathname: "/docs/useform/reset", name: "reset" },
+      { pathname: "/docs/useform/resetfield", name: "resetField" },
+      { pathname: "/docs/useform/seterror", name: "setError" },
+      { pathname: "/docs/useform/clearerrors", name: "clearErrors" },
+      { pathname: "/docs/useform/setvalue", name: "setValue" },
+      { pathname: "/docs/useform/setfocus", name: "setFocus" },
+      { pathname: "/docs/useform/getvalues", name: "getValues" },
+      { pathname: "/docs/useform/getfieldstate", name: "getFieldState" },
+      { pathname: "/docs/useform/trigger", name: "trigger" },
+      { pathname: "/docs/useform/control", name: "control" },
+      { pathname: "/docs/useform/form", name: "Form" },
+    ],
+  },
+  {
+    pathname: "/docs/usecontroller",
+    name: "useController",
+    pages: [
+      {
+        pathname: "/docs/usecontroller/controller",
+        name: "Controller",
+      },
+    ],
+  },
+  {
+    pathname: "/docs/useformcontext",
+    name: "useFormContext",
+    pages: [
+      {
+        pathname: "/docs/formprovider",
+        name: "FormProvider",
+      },
+    ],
+  },
+  {
+    pathname: "/docs/usewatch",
+    name: "useWatch",
+  },
+  {
+    pathname: "/docs/useformstate",
+    name: "useFormState",
+    pages: [
+      {
+        pathname: "/docs/useformstate/errormessage",
+        name: "ErrorMessage",
+      },
+    ],
+  },
+  {
+    pathname: "/docs/usefieldarray",
+    name: "useFieldArray",
+  },
+]
+
+export const tsLinks: Pages = [
+  {
+    name: "Resolver",
+    pathname: "#Resolver",
+  },
+  {
+    name: "SubmitHandler",
+    pathname: "#SubmitHandler",
+  },
+  {
+    name: "Control",
+    pathname: "#Control",
+  },
+  {
+    name: "UseFormReturn",
+    pathname: "#UseFormReturn",
+  },
+  {
+    name: "UseFormProps",
+    pathname: "#UseFormProps",
+  },
+  {
+    name: "UseFieldArrayReturn",
+    pathname: "#UseFieldArrayReturn",
+  },
+  {
+    name: "UseFieldArrayProps",
+    pathname: "#UseFieldArrayProps",
+  },
+  {
+    name: "UseControllerReturn",
+    pathname: "#UseControllerReturn",
+  },
+  {
+    name: "UseControllerProps",
+    pathname: "#UseControllerProps",
+  },
+  {
+    name: "FieldError",
+    pathname: "#FieldError",
+  },
+  {
+    name: "FieldErrors",
+    pathname: "#FieldErrors",
+  },
+  {
+    name: "Field",
+    pathname: "#Field",
+  },
+  {
+    name: "FieldPath",
+    pathname: "#FieldPath",
+  },
+  {
+    name: "FieldValues",
+    pathname: "#FieldValues",
+  },
+  {
+    name: "FieldArrayWithId",
+    pathname: "#FieldArrayWithId",
+  },
+  {
+    name: "Mode",
+    pathname: "#Mode",
+  },
+  {
+    name: "RegisterOptions",
+    pathname: "#RegisterOptions",
+  },
+  {
+    name: "FormStateProxy",
+    pathname: "#FormStateProxy",
+  },
+  {
+    name: "NestedValue",
+    pathname: "#NestedValue",
+  },
+]
+
+export const getStartedLinks: Pages = [
+  {
+    name: "Quick start",
+    pathname: "#Quickstart",
+  },
+  {
+    name: "React Web Video Tutorial",
+    pathname: "#ReactWebVideoTutorial",
+  },
+  {
+    name: "Register fields",
+    pathname: "#Registerfields",
+  },
+  {
+    name: "Apply validation",
+    pathname: "#Applyvalidation",
+  },
+  {
+    name: "Integrating an existing form",
+    pathname: "#Integratinganexistingform",
+  },
+  {
+    name: "Integrating with UI libraries",
+    pathname: "#IntegratingwithUIlibraries",
+  },
+  {
+    name: "Integrating Controlled Inputs",
+    pathname: "#IntegratingControlledInputs",
+  },
+  {
+    name: "Integrating with global state",
+    pathname: "#Integratingwithglobalstate",
+  },
+  {
+    name: "Handle errors",
+    pathname: "#Handleerrors",
+  },
+  {
+    name: "Schema Validation",
+    pathname: "#SchemaValidation",
+  },
+  {
+    name: "React Native",
+    pathname: "#ReactNative",
+  },
+  {
+    name: "TypeScript",
+    pathname: "#TypeScript",
+  },
+  {
+    name: "Design and philosophy",
+    pathname: "#Designandphilosophy",
+  },
+]
diff --git a/src/components/SideMenu.module.css b/src/components/Menu/SideMenu.module.css
similarity index 100%
rename from src/components/SideMenu.module.css
rename to src/components/Menu/SideMenu.module.css
diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts
new file mode 100644
index 000000000..ddb14f98d
--- /dev/null
+++ b/src/components/Menu/index.ts
@@ -0,0 +1,10 @@
+import Menu from "./Menu"
+import {
+  apiLinks,
+  faqLinks,
+  advancedLinks,
+  tsLinks,
+  getStartedLinks,
+} from "./MenuLinks"
+
+export { Menu, apiLinks, faqLinks, advancedLinks, tsLinks, getStartedLinks }
diff --git a/src/components/NewSideMenu.tsx b/src/components/NewSideMenu.tsx
deleted file mode 100644
index 623ce8398..000000000
--- a/src/components/NewSideMenu.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { memo } from "react"
-import colors from "../styles/colors"
-import generic from "../data/generic"
-import styles from "./SideMenu.module.css"
-import typographyStyles from "../styles/typography.module.css"
-import { useRouter } from "next/router"
-
-export const animateProps = {
-  play: true,
-  start: {
-    opacity: 0,
-    transform: "translateX(-30px)",
-  },
-  end: {
-    opacity: 1,
-  },
-  easeType: "cubic-bezier(0.37, 0, 0.63, 1)",
-}
-
-function SideMenu({
-  links,
-}: {
-  links: { title: string; href: string }[]
-  activeIndex?: number
-}) {
-  const router = useRouter()
-
-  return (
-    <aside className={styles.menu}>
-      <div>
-        <div className={styles.titleList}>
-          <h4
-            className={typographyStyles.title}
-            style={{
-              fontSize: 16,
-              color: colors.lightBlue,
-            }}
-          >
-            {generic.menu}
-          </h4>
-        </div>
-
-        <ul className="scrollArea">
-          {links.map((rawLink, index) => {
-            const link = rawLink.title
-
-            return (
-              <li key={`menu-${index}`}>
-                <code aria-hidden className={styles.code}>{`</>`}</code>
-                <button
-                  onClick={() => {
-                    router.push({ hash: rawLink.href })
-                  }}
-                  style={{
-                    top: "-3px",
-                    position: "relative",
-                  }}
-                >
-                  {link}
-                </button>
-              </li>
-            )
-          })}
-        </ul>
-      </div>
-    </aside>
-  )
-}
-
-export default memo(SideMenu)
diff --git a/src/components/UseController.tsx b/src/components/UseController.tsx
index f5f13ede7..7ba5942cc 100644
--- a/src/components/UseController.tsx
+++ b/src/components/UseController.tsx
@@ -1,10 +1,10 @@
 import api from "../data/api"
 import typographyStyles from "../styles/typography.module.css"
 import Footer from "./Footer"
-import { Menu } from "./Menu"
 import containerStyles from "../styles/container.module.css"
 import UseControllerContent from "./UseControllerContent"
 import StarRepo from "./StarRepo"
+import { Menu, apiLinks } from "./Menu"
 
 export default function UseFieldArray() {
   return (
@@ -17,7 +17,7 @@ export default function UseFieldArray() {
       </p>
 
       <div className={containerStyles.wrapper}>
-        <Menu />
+        <Menu pages={apiLinks} />
 
         <main>
           <section>
diff --git a/src/components/UseFieldArray.tsx b/src/components/UseFieldArray.tsx
index 8083a952d..92822e07c 100644
--- a/src/components/UseFieldArray.tsx
+++ b/src/components/UseFieldArray.tsx
@@ -1,10 +1,10 @@
 import api from "../data/api"
 import typographyStyles from "../styles/typography.module.css"
 import Footer from "./Footer"
-import { Menu } from "./Menu"
 import containerStyles from "../styles/container.module.css"
 import UseFieldArrayContent from "./UseFieldArrayContent"
 import StarRepo from "./StarRepo"
+import { Menu, apiLinks } from "./Menu"
 
 export default function UseFieldArray() {
   return (
@@ -15,7 +15,7 @@ export default function UseFieldArray() {
       <p className={typographyStyles.subHeading}>React hooks for Field Array</p>
 
       <div className={containerStyles.wrapper}>
-        <Menu />
+        <Menu pages={apiLinks} />
 
         <main>
           <section>
diff --git a/src/components/UseForm.tsx b/src/components/UseForm.tsx
index afd3a750d..a0e7be621 100644
--- a/src/components/UseForm.tsx
+++ b/src/components/UseForm.tsx
@@ -1,10 +1,10 @@
 import Footer from "./Footer"
-import { Menu } from "./Menu"
 import typographyStyles from "../styles/typography.module.css"
 import containerStyles from "../styles/container.module.css"
 import StarRepo from "./StarRepo"
 import { SelectNav } from "./selectNav"
 import UseFormContent from "../content/use-form.mdx"
+import { Menu, apiLinks } from "./Menu"
 
 const UseForm = () => {
   return (
@@ -17,7 +17,7 @@ const UseForm = () => {
       </p>
 
       <div className={containerStyles.wrapper}>
-        <Menu />
+        <Menu pages={apiLinks} />
 
         <SelectNav
           options={[
diff --git a/src/components/UseFormState.tsx b/src/components/UseFormState.tsx
index 09297d851..bb2a6d276 100644
--- a/src/components/UseFormState.tsx
+++ b/src/components/UseFormState.tsx
@@ -1,6 +1,5 @@
 import Footer from "./Footer"
 import Link from "next/link"
-import { Menu } from "./Menu"
 import api from "../data/api"
 import useFormState from "./codeExamples/useFormState"
 import typographyStyles from "../styles/typography.module.css"
@@ -10,6 +9,7 @@ import CodeArea from "./CodeArea"
 import tableStyles from "../styles/table.module.css"
 import generic from "../data/generic"
 import StarRepo from "./StarRepo"
+import { Menu, apiLinks } from "./Menu"
 
 const UseFormState = () => {
   return (
@@ -22,7 +22,7 @@ const UseFormState = () => {
       </p>
 
       <div className={containerStyles.wrapper}>
-        <Menu />
+        <Menu pages={apiLinks} />
 
         <main>
           <section id="useFormRef">
diff --git a/src/components/UseWatch.tsx b/src/components/UseWatch.tsx
index 17c36512b..704ed6b7d 100644
--- a/src/components/UseWatch.tsx
+++ b/src/components/UseWatch.tsx
@@ -1,10 +1,10 @@
 import api from "../data/api"
 import typographyStyles from "../styles/typography.module.css"
 import Footer from "./Footer"
-import { Menu } from "./Menu"
 import containerStyles from "../styles/container.module.css"
 import UseWatch from "./UseWatchContent"
 import StarRepo from "./StarRepo"
+import { Menu, apiLinks } from "./Menu"
 
 export default function UseFieldArray() {
   return (
@@ -17,7 +17,7 @@ export default function UseFieldArray() {
       </p>
 
       <div className={containerStyles.wrapper}>
-        <Menu />
+        <Menu pages={apiLinks} />
 
         <main>
           <section>
diff --git a/src/components/tsPage.tsx b/src/components/tsPage.tsx
index 1a3e6aa9c..4b2a29320 100644
--- a/src/components/tsPage.tsx
+++ b/src/components/tsPage.tsx
@@ -3,86 +3,7 @@ import containerStyles from "../styles/container.module.css"
 import StarRepo from "./StarRepo"
 import Footer from "./Footer"
 import TSContent, { meta } from "../content/ts.mdx"
-import NewSideMenu from "./NewSideMenu"
-
-const links = [
-  {
-    title: "Resolver",
-    href: "#Resolver",
-  },
-  {
-    title: "SubmitHandler",
-    href: "#SubmitHandler",
-  },
-  {
-    title: "Control",
-    href: "#Control",
-  },
-  {
-    title: "UseFormReturn",
-    href: "#UseFormReturn",
-  },
-  {
-    title: "UseFormProps",
-    href: "#UseFormProps",
-  },
-  {
-    title: "UseFieldArrayReturn",
-    href: "#UseFieldArrayReturn",
-  },
-  {
-    title: "UseFieldArrayProps",
-    href: "#UseFieldArrayProps",
-  },
-  {
-    title: "UseControllerReturn",
-    href: "#UseControllerReturn",
-  },
-  {
-    title: "UseControllerProps",
-    href: "#UseControllerProps",
-  },
-  {
-    title: "FieldError",
-    href: "#FieldError",
-  },
-  {
-    title: "FieldErrors",
-    href: "#FieldErrors",
-  },
-  {
-    title: "Field",
-    href: "#Field",
-  },
-  {
-    title: "FieldPath",
-    href: "#FieldPath",
-  },
-  {
-    title: "FieldValues",
-    href: "#FieldValues",
-  },
-  {
-    title: "FieldArrayWithId",
-    href: "#FieldArrayWithId",
-  },
-  {
-    title: "Mode",
-    href: "#Mode",
-  },
-  {
-    title: "RegisterOptions",
-    href: "#RegisterOptions",
-  },
-  {
-    title: "FormStateProxy",
-    href: "#FormStateProxy",
-  },
-  {
-    title: "NestedValue",
-    href: "#NestedValue",
-  },
-]
+import { Menu, tsLinks } from "./Menu"
 
 const TsPage = () => {
   return (
@@ -95,7 +16,7 @@ const TsPage = () => {
       </section>
 
       <div className={containerStyles.wrapper}>
-        <NewSideMenu links={links} />
+        <Menu pages={tsLinks} />
 
         <main>
           <TSContent />
diff --git a/src/components/useForm/FormState.tsx b/src/components/useForm/FormState.tsx
index f212865cf..66ed6f09a 100644
--- a/src/components/useForm/FormState.tsx
+++ b/src/components/useForm/FormState.tsx
@@ -1,5 +1,4 @@
 import Footer from "../Footer"
-import { Menu } from "../Menu"
 import api from "../../data/api"
 import typographyStyles from "../../styles/typography.module.css"
 import containerStyles from "../../styles/container.module.css"
@@ -8,6 +7,7 @@ import CodeArea from "../CodeArea"
 import formState from "../codeExamples/formState"
 import formStateTs from "../codeExamples/formStateTs"
 import StarRepo from "../StarRepo"
+import { Menu, apiLinks } from "../Menu"
 
 const FormState = () => {
   return (
@@ -18,7 +18,7 @@ const FormState = () => {
       <p className={typographyStyles.subHeading}>State of the form</p>
 
       <div className={containerStyles.wrapper}>
-        <Menu />
+        <Menu pages={apiLinks} />
 
         <main>
           <section>
diff --git a/src/components/useForm/GetFieldState.tsx b/src/components/useForm/GetFieldState.tsx
index 6a90c16dd..cbc2d40e7 100644
--- a/src/components/useForm/GetFieldState.tsx
+++ b/src/components/useForm/GetFieldState.tsx
@@ -1,13 +1,13 @@
 import Link from "next/link"
 import containerStyles from "../../styles/container.module.css"
 import typographyStyles from "../../styles/typography.module.css"
-import { Menu } from "../Menu"
 import CodeArea from "../CodeArea"
 import StarRepo from "../StarRepo"
 import Footer from "../Footer"
 import getFieldState from "../codeExamples/getFieldState"
 import tableStyles from "../../styles/table.module.css"
 import generic from "../../data/generic"
+import { Menu, apiLinks } from "../Menu"
 
 export const GetFieldState = () => {
   return (
@@ -18,7 +18,7 @@ export const GetFieldState = () => {
       <p className={typographyStyles.subHeading}>State of the field</p>
 
       <div className={containerStyles.wrapper}>
-        <Menu />
+        <Menu pages={apiLinks} />
 
         <main>
           <section>
diff --git a/src/components/useForm/GetValues.tsx b/src/components/useForm/GetValues.tsx
index 9d2d66d39..31c96118d 100644
--- a/src/components/useForm/GetValues.tsx
+++ b/src/components/useForm/GetValues.tsx
@@ -1,5 +1,4 @@
 import Footer from "../Footer"
-import { Menu } from "../Menu"
 import api from "../../data/api"
 import typographyStyles from "../../styles/typography.module.css"
 import containerStyles from "../../styles/container.module.css"
@@ -8,6 +7,7 @@ import getValues from "../codeExamples/getValues"
 import getValuesTs from "../codeExamples/getValuesTs"
 import getValuesTypes from "../codeExamples/getValuesTypes"
 import StarRepo from "../StarRepo"
+import { Menu, apiLinks } from "../Menu"
 
 const GetValues = () => {
   return (
@@ -18,7 +18,7 @@ const GetValues = () => {
       <p className={typographyStyles.subHeading}>Get form values</p>
 
       <div className={containerStyles.wrapper}>
-        <Menu />
+        <Menu pages={apiLinks} />
 
         <main>
           <section>
diff --git a/src/components/useForm/Register.tsx b/src/components/useForm/Register.tsx
index 03a6e0043..7544f6432 100644
--- a/src/components/useForm/Register.tsx
+++ b/src/components/useForm/Register.tsx
@@ -1,10 +1,10 @@
 import Footer from "../Footer"
-import { Menu } from "../Menu"
 import api from "../../data/api"
 import ApiRefTable from "../ApiRefTable"
 import typographyStyles from "../../styles/typography.module.css"
 import containerStyles from "../../styles/container.module.css"
 import StarRepo from "../StarRepo"
+import { Menu, apiLinks } from "../Menu"
 
 const Register = () => {
   return (
@@ -17,7 +17,7 @@ const Register = () => {
       </p>
 
       <div className={containerStyles.wrapper}>
-        <Menu />
+        <Menu pages={apiLinks} />
 
         <main>
           <section id="registerRef">
diff --git a/src/components/useForm/SetError.tsx b/src/components/useForm/SetError.tsx
index e3bf309b4..1d04f157d 100644
--- a/src/components/useForm/SetError.tsx
+++ b/src/components/useForm/SetError.tsx
@@ -1,5 +1,4 @@
 import Footer from "../Footer"
-import { Menu } from "../Menu"
 import api from "../../data/api"
 import typographyStyles from "../../styles/typography.module.css"
 import containerStyles from "../../styles/container.module.css"
@@ -13,6 +12,7 @@ import setAllErrors from "../codeExamples/setAllErrors"
 import setAllErrorsTs from "../codeExamples/setAllErrorsTs"
 import StarRepo from "../StarRepo"
 import serverError from "../codeExamples/serverError"
+import { Menu, apiLinks } from "../Menu"
 
 const SetError = () => {
   return (
@@ -23,7 +23,7 @@ const SetError = () => {
       <p className={typographyStyles.subHeading}>Manually set an input error</p>
 
       <div className={containerStyles.wrapper}>
-        <Menu />
+        <Menu pages={apiLinks} />
 
         <main>
           <section>
diff --git a/src/components/useForm/SetValue.tsx b/src/components/useForm/SetValue.tsx
index b042bd035..6902a5109 100644
--- a/src/components/useForm/SetValue.tsx
+++ b/src/components/useForm/SetValue.tsx
@@ -1,5 +1,4 @@
 import Footer from "../Footer"
-import { Menu } from "../Menu"
 import api from "../../data/api"
 import typographyStyles from "../../styles/typography.module.css"
 import containerStyles from "../../styles/container.module.css"
@@ -10,6 +9,7 @@ import setValueTs from "../codeExamples/setValueTs"
 import setValueTypes from "../codeExamples/setValueTypes"
 import dependantFields from "../codeExamples/dependantFieldsTS"
 import StarRepo from "../StarRepo"
+import { Menu, apiLinks } from "../Menu"
 
 const SetValue = () => {
   return (
@@ -20,7 +20,7 @@ const SetValue = () => {
       <p className={typographyStyles.subHeading}>Update field value</p>
 
       <div className={containerStyles.wrapper}>
-        <Menu />
+        <Menu pages={apiLinks} />
 
         <main>
           <section>
diff --git a/src/components/useForm/Trigger.tsx b/src/components/useForm/Trigger.tsx
index 80596c0aa..04b012d43 100644
--- a/src/components/useForm/Trigger.tsx
+++ b/src/components/useForm/Trigger.tsx
@@ -1,5 +1,4 @@
 import Footer from "../Footer"
-import { Menu } from "../Menu"
 import api from "../../data/api"
 import typographyStyles from "../../styles/typography.module.css"
 import containerStyles from "../../styles/container.module.css"
@@ -7,6 +6,7 @@ import CodeArea from "../CodeArea"
 import trigger from "../codeExamples/trigger"
 import triggerTs from "../codeExamples/triggerTs"
 import StarRepo from "../StarRepo"
+import { Menu, apiLinks } from "../Menu"
 
 const Trigger = () => {
   return (
@@ -19,7 +19,7 @@ const Trigger = () => {
       </p>
 
       <div className={containerStyles.wrapper}>
-        <Menu />
+        <Menu pages={apiLinks} />
 
         <main>
           <section>
diff --git a/src/content/unregister.mdx b/src/content/unregister.mdx
index 16e951189..b89131208 100644
--- a/src/content/unregister.mdx
+++ b/src/content/unregister.mdx
@@ -19,7 +19,7 @@ The example below shows what to expect when you invoke the `unregister` method.
 | <TypeText>string</TypeText>   | `unregister("yourDetails.firstName")`  | `{ lastName: '' }` |
 | <TypeText>string[]</TypeText> | `unregister(["yourDetails.lastName"])` | `''`               |
 
-## Options
+### Options
 
 ---
 
@@ -125,4 +125,6 @@ export default function App() {
 
 ### Video
 
+---
+
 <YouTube youTubeId="TM99g_NW5Gk" />
diff --git a/src/pages/docs/formprovider.tsx b/src/pages/docs/formprovider.tsx
index 4bd326fdd..74dc733d1 100644
--- a/src/pages/docs/formprovider.tsx
+++ b/src/pages/docs/formprovider.tsx
@@ -2,11 +2,11 @@ import Seo from "../../components/seo"
 import Layout from "../../components/layout"
 import containerStyles from "../../styles/container.module.css"
 import typographyStyles from "../../styles/typography.module.css"
-import { Menu } from "../../components/Menu"
 import CodeArea from "../../components/CodeArea"
 import formContext from "../../components/codeExamples/formContext"
 import tableStyles from "../../styles/table.module.css"
 import Link from "next/link"
+import { Menu, apiLinks } from "../../components/Menu"
 
 export default function FormProvider() {
   return (
@@ -22,7 +22,7 @@ export default function FormProvider() {
         </p>
 
         <div className={containerStyles.wrapper}>
-          <Menu />
+          <Menu pages={apiLinks} />
 
           <main>
             <p>
diff --git a/src/pages/docs/usecontroller/controller.tsx b/src/pages/docs/usecontroller/controller.tsx
index 197b3d78f..c2c790c29 100644
--- a/src/pages/docs/usecontroller/controller.tsx
+++ b/src/pages/docs/usecontroller/controller.tsx
@@ -1,11 +1,11 @@
 import Seo from "../../../components/seo"
 import Layout from "../../../components/layout"
 import Footer from "../../../components/Footer"
-import { Menu } from "../../../components/Menu"
 import StarRepo from "../../../components/StarRepo"
 import containerStyles from "../../../styles/container.module.css"
 import typographyStyles from "../../../styles/typography.module.css"
 import ControllerContent from "../../../content/controller.mdx"
+import { Menu, apiLinks } from "../../../components/Menu"
 
 export default function ControllerPage() {
   return (
@@ -20,7 +20,7 @@ export default function ControllerPage() {
         </p>
 
         <div className={containerStyles.wrapper}>
-          <Menu />
+          <Menu pages={apiLinks} />
 
           <main>
             <ControllerContent />
diff --git a/src/pages/docs/useform/clearerrors.tsx b/src/pages/docs/useform/clearerrors.tsx
index 248d9ed1f..135e1b05f 100644
--- a/src/pages/docs/useform/clearerrors.tsx
+++ b/src/pages/docs/useform/clearerrors.tsx
@@ -1,11 +1,11 @@
 import Seo from "../../../components/seo"
 import Layout from "../../../components/layout"
 import Footer from "../../../components/Footer"
-import { Menu } from "../../../components/Menu"
 import StarRepo from "../../../components/StarRepo"
 import containerStyles from "../../../styles/container.module.css"
 import typographyStyles from "../../../styles/typography.module.css"
 import ClearErrorsContent from "../../../content/clear-errors.mdx"
+import { Menu, apiLinks } from "../../../components/Menu"
 
 export default function ClearErrorsPage() {
   return (
@@ -18,7 +18,7 @@ export default function ClearErrorsPage() {
         <p className={typographyStyles.subHeading}>Clear form errors</p>
 
         <div className={containerStyles.wrapper}>
-          <Menu />
+          <Menu pages={apiLinks} />
 
           <main>
             <ClearErrorsContent />
diff --git a/src/pages/docs/useform/control.tsx b/src/pages/docs/useform/control.tsx
index 8777ee48b..b48a20fc2 100644
--- a/src/pages/docs/useform/control.tsx
+++ b/src/pages/docs/useform/control.tsx
@@ -1,11 +1,11 @@
 import Seo from "../../../components/seo"
 import Layout from "../../../components/layout"
 import Footer from "../../../components/Footer"
-import { Menu } from "../../../components/Menu"
 import StarRepo from "../../../components/StarRepo"
 import containerStyles from "../../../styles/container.module.css"
 import typographyStyles from "../../../styles/typography.module.css"
 import ControlContent from "../../../content/control.mdx"
+import { Menu, apiLinks } from "../../../components/Menu"
 
 export default function ControlPage() {
   return (
@@ -18,7 +18,7 @@ export default function ControlPage() {
         <p className={typographyStyles.subHeading}>Take control of the form</p>
 
         <div className={containerStyles.wrapper}>
-          <Menu />
+          <Menu pages={apiLinks} />
 
           <main>
             <ControlContent />
diff --git a/src/pages/docs/useform/form.tsx b/src/pages/docs/useform/form.tsx
index c129f1e31..804ef6fd7 100644
--- a/src/pages/docs/useform/form.tsx
+++ b/src/pages/docs/useform/form.tsx
@@ -2,7 +2,6 @@ import Seo from "../../../components/seo"
 import Layout from "../../../components/layout"
 import containerStyles from "../../../styles/container.module.css"
 import typographyStyles from "../../../styles/typography.module.css"
-import { Menu } from "../../../components/Menu"
 import CodeArea from "../../../components/CodeArea"
 import {
   formWeb,
@@ -14,6 +13,7 @@ import TabGroup from "../../../components/TabGroup"
 import tableStyles from "../../../styles/table.module.css"
 import generic from "../../../data/generic"
 import Link from "next/link"
+import { Menu, apiLinks } from "../../../components/Menu"
 
 const Form = () => {
   return (
@@ -26,7 +26,7 @@ const Form = () => {
         <p className={typographyStyles.subHeading}>Take care form submission</p>
 
         <div className={containerStyles.wrapper}>
-          <Menu />
+          <Menu pages={apiLinks} />
 
           <main>
             <section>
diff --git a/src/pages/docs/useform/handlesubmit.tsx b/src/pages/docs/useform/handlesubmit.tsx
index d629984d2..e46fa071a 100644
--- a/src/pages/docs/useform/handlesubmit.tsx
+++ b/src/pages/docs/useform/handlesubmit.tsx
@@ -3,9 +3,9 @@ import Layout from "../../../components/layout"
 import containerStyles from "../../../styles/container.module.css"
 import typographyStyles from "../../../styles/typography.module.css"
 import Footer from "../../../components/Footer"
-import { Menu } from "../../../components/Menu"
 import StarRepo from "../../../components/StarRepo"
 import HandleSubmitContent from "../../../content/handle-submit.mdx"
+import { Menu, apiLinks } from "../../../components/Menu"
 
 const Handlesubmit = () => {
   return (
@@ -20,7 +20,7 @@ const Handlesubmit = () => {
         </p>
 
         <div className={containerStyles.wrapper}>
-          <Menu />
+          <Menu pages={apiLinks} />
 
           <main>
             <HandleSubmitContent />
diff --git a/src/pages/docs/useform/reset.tsx b/src/pages/docs/useform/reset.tsx
index 3d01ce9ec..1eacbec23 100644
--- a/src/pages/docs/useform/reset.tsx
+++ b/src/pages/docs/useform/reset.tsx
@@ -1,11 +1,11 @@
 import Seo from "../../../components/seo"
 import Layout from "../../../components/layout"
 import Footer from "../../../components/Footer"
-import { Menu } from "../../../components/Menu"
 import StarRepo from "../../../components/StarRepo"
 import containerStyles from "../../../styles/container.module.css"
 import typographyStyles from "../../../styles/typography.module.css"
 import ResetContent from "../../../content/reset.mdx"
+import { Menu, apiLinks } from "../../../components/Menu"
 
 const ResetComponent = () => {
   return (
@@ -20,7 +20,7 @@ const ResetComponent = () => {
         </p>
 
         <div className={containerStyles.wrapper}>
-          <Menu />
+          <Menu pages={apiLinks} />
 
           <main>
             <ResetContent />
diff --git a/src/pages/docs/useform/resetfield.tsx b/src/pages/docs/useform/resetfield.tsx
index a97739146..f80d61ca9 100644
--- a/src/pages/docs/useform/resetfield.tsx
+++ b/src/pages/docs/useform/resetfield.tsx
@@ -4,10 +4,10 @@ import ResetFieldContent from "../../../content/reset-field.mdx"
 import containerStyles from "../../../styles/container.module.css"
 import typographyStyles from "../../../styles/typography.module.css"
 import Footer from "../../../components/Footer"
-import { Menu } from "../../../components/Menu"
 import StarRepo from "../../../components/StarRepo"
+import { Menu, apiLinks } from "../../../components/Menu"
 
-const Resetfield = () => {
+const ResetField = () => {
   return (
     <Layout>
       <Seo title="useForm - resetField" />
@@ -20,7 +20,7 @@ const Resetfield = () => {
         </p>
 
         <div className={containerStyles.wrapper}>
-          <Menu />
+          <Menu pages={apiLinks} />
 
           <main>
             <ResetFieldContent />
@@ -35,4 +35,4 @@ const Resetfield = () => {
   )
 }
 
-export default Resetfield
+export default ResetField
diff --git a/src/pages/docs/useform/setfocus.tsx b/src/pages/docs/useform/setfocus.tsx
index 110ffd451..7c8c9a56c 100644
--- a/src/pages/docs/useform/setfocus.tsx
+++ b/src/pages/docs/useform/setfocus.tsx
@@ -3,9 +3,9 @@ import Layout from "../../../components/layout"
 import containerStyles from "../../../styles/container.module.css"
 import typographyStyles from "../../../styles/typography.module.css"
 import Footer from "../../../components/Footer"
-import { Menu } from "../../../components/Menu"
 import StarRepo from "../../../components/StarRepo"
 import SetFocusContent from "../../../content/set-focus.mdx"
+import { Menu, apiLinks } from "../../../components/Menu"
 
 const Setfocus = () => {
   return (
@@ -20,7 +20,7 @@ const Setfocus = () => {
         </p>
 
         <div className={containerStyles.wrapper}>
-          <Menu />
+          <Menu pages={apiLinks} />
 
           <main>
             <SetFocusContent />
diff --git a/src/pages/docs/useform/unregister.tsx b/src/pages/docs/useform/unregister.tsx
index 9a883a692..35904eda6 100644
--- a/src/pages/docs/useform/unregister.tsx
+++ b/src/pages/docs/useform/unregister.tsx
@@ -5,7 +5,7 @@ import containerStyles from "../../../styles/container.module.css"
 import typographyStyles from "../../../styles/typography.module.css"
 import UnregisterContent from "../../../content/unregister.mdx"
 import Footer from "../../../components/Footer"
-import { Menu } from "../../../components/Menu"
+import { Menu, apiLinks } from "../../../components/Menu"
 
 const Unregister = () => {
   return (
@@ -20,7 +20,7 @@ const Unregister = () => {
         </p>
 
         <div className={containerStyles.wrapper}>
-          <Menu />
+          <Menu pages={apiLinks} />
 
           <main>
             <UnregisterContent />
diff --git a/src/pages/docs/useform/watch.tsx b/src/pages/docs/useform/watch.tsx
index 9d937a25d..d35efc62f 100644
--- a/src/pages/docs/useform/watch.tsx
+++ b/src/pages/docs/useform/watch.tsx
@@ -4,7 +4,7 @@ import containerStyles from "../../../styles/container.module.css"
 import typographyStyles from "../../../styles/typography.module.css"
 import WatchContent from "../../../content/watch.mdx"
 import Footer from "../../../components/Footer"
-import { Menu } from "../../../components/Menu"
+import { Menu, apiLinks } from "../../../components/Menu"
 
 const WatchComponent = () => {
   return (
@@ -19,7 +19,7 @@ const WatchComponent = () => {
         </p>
 
         <div className={containerStyles.wrapper}>
-          <Menu />
+          <Menu pages={apiLinks} />
 
           <main>
             <WatchContent />
diff --git a/src/pages/docs/useformcontext.tsx b/src/pages/docs/useformcontext.tsx
index fb43532eb..0245fcad4 100644
--- a/src/pages/docs/useformcontext.tsx
+++ b/src/pages/docs/useformcontext.tsx
@@ -1,13 +1,13 @@
 import Seo from "../../components/seo"
 import Layout from "../../components/layout"
 import Footer from "../../components/Footer"
-import { Menu } from "../../components/Menu"
 import StarRepo from "../../components/StarRepo"
 import containerStyles from "../../styles/container.module.css"
 import typographyStyles from "../../styles/typography.module.css"
 import UseFormContextContent from "../../content/use-form-context.mdx"
+import { Menu, apiLinks } from "../../components/Menu"
 
-const Useformcontext = () => {
+const UseFormContext = () => {
   return (
     <Layout>
       <Seo title="useFormContext" />
@@ -20,7 +20,7 @@ const Useformcontext = () => {
         </p>
 
         <div className={containerStyles.wrapper}>
-          <Menu />
+          <Menu pages={apiLinks} />
 
           <main>
             <UseFormContextContent />
@@ -34,4 +34,4 @@ const Useformcontext = () => {
   )
 }
 
-export default Useformcontext
+export default UseFormContext
diff --git a/src/types/types.ts b/src/types/types.ts
new file mode 100644
index 000000000..ddf7f3f51
--- /dev/null
+++ b/src/types/types.ts
@@ -0,0 +1,8 @@
+export type Pages = {
+  pathname: string
+  name: string
+  pages?: {
+    pathname: string
+    name: string
+  }[]
+}[]

From e40830a1e03e5fcad52b396bf5e2f99e17e3ec93 Mon Sep 17 00:00:00 2001
From: Lucas <aranlucas@gmail.com>
Date: Tue, 6 Jun 2023 13:25:57 -0700
Subject: [PATCH 3/5] fix: Homepage ts errors

---
 .eslintrc.js                          |   1 +
 src/components/ApiGallery.module.css  |   3 -
 src/components/BuilderPage.tsx        |   6 +-
 src/components/CodeSandbox.tsx        |   2 +-
 src/components/Header.tsx             |   6 +-
 src/components/HomePage.tsx           | 132 +++++++++++---------------
 src/components/Search.tsx             |  20 +---
 src/components/Watcher.tsx            |  62 ++++++------
 src/components/general-observer.tsx   |  22 +++--
 src/components/mdx/youtube.tsx        |   4 +-
 src/components/utils/useWindowSize.ts |   8 +-
 11 files changed, 118 insertions(+), 148 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 9c85a039d..94b66c9b7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -41,5 +41,6 @@ module.exports = {
     "react/jsx-curly-brace-presence": "warn",
     // jsx-ally
     "jsx-a11y/no-onchange": WARN,
+    "import/no-anonymous-default-export": OFF,
   },
 }
diff --git a/src/components/ApiGallery.module.css b/src/components/ApiGallery.module.css
index d7f929e00..85140aa7d 100644
--- a/src/components/ApiGallery.module.css
+++ b/src/components/ApiGallery.module.css
@@ -37,12 +37,9 @@
   border: 1px solid var(--color-light-blue);
   position: relative;
   padding-bottom: 30px;
-  transition: 0.2s all;
 }
 
 .gallery li:hover {
-  transform: translate(-2px, -2px);
-  box-shadow: 2px 2px 0 4px black;
   border: 1px solid var(--color-secondary);
 }
 
diff --git a/src/components/BuilderPage.tsx b/src/components/BuilderPage.tsx
index 0f2f18f2e..b03c6ce51 100644
--- a/src/components/BuilderPage.tsx
+++ b/src/components/BuilderPage.tsx
@@ -16,7 +16,7 @@ import containerStyles from "../styles/container.module.css"
 import typographyStyles from "../styles/typography.module.css"
 import CodeArea from "./CodeArea"
 import ClipBoard from "./ClipBoard"
-import { useState, useRef, useEffect, memo, MutableRefObject } from "react"
+import { useState, useRef, useEffect, memo, RefObject } from "react"
 import styles from "./BuilderPage.module.css"
 import { BeekaiBuilderPage } from "./BeekaiBuilderPage"
 import { useRouter } from "next/router"
@@ -53,7 +53,7 @@ function BuilderPage({
 }: {
   showBuilder?: boolean
   toggleBuilder?: (state: boolean) => void
-  HomeRef?: MutableRefObject<HTMLDivElement>
+  HomeRef?: RefObject<HTMLDivElement>
   isStatic?: boolean
 }) {
   const {
@@ -377,7 +377,7 @@ function BuilderPage({
                   if (toggleBuilder) {
                     toggleBuilder(false)
                     document.body.style.overflow = "auto"
-                    HomeRef.current.scrollIntoView({ behavior: "smooth" })
+                    HomeRef?.current?.scrollIntoView({ behavior: "smooth" })
                   } else {
                     router.push("/?goToDemo&updated=true")
                   }
diff --git a/src/components/CodeSandbox.tsx b/src/components/CodeSandbox.tsx
index a4bfb06ea..95554447a 100644
--- a/src/components/CodeSandbox.tsx
+++ b/src/components/CodeSandbox.tsx
@@ -5,7 +5,7 @@ export const CodeSandBoxLink = ({
   isJS,
   isExpo,
 }: {
-  url: string
+  url?: string
   isExpo?: boolean
   isJS?: boolean
 }) => (
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 47026abd6..5f4340695 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -120,7 +120,11 @@ export default function Header({
                 <button
                   className={buttonStyles.primaryButton}
                   onClick={() => {
-                    homeRef.current.scrollIntoView({ behavior: "smooth" })
+                    homeRef.current?.scrollIntoView({
+                      behavior: "smooth",
+                      block: "start",
+                      inline: "nearest",
+                    })
                   }}
                 >
                   {home.demo}
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
index 24b38d85a..c49fcb391 100755
--- a/src/components/HomePage.tsx
+++ b/src/components/HomePage.tsx
@@ -15,81 +15,38 @@ import buttonStyles from "../styles/button.module.css"
 import styles from "./HomePage.module.css"
 import { SponsorsList } from "./sponsorsList"
 import { useRouter } from "next/router"
-
-const options = {
-  rootMargin: "0px 0px",
-  threshold: [1],
-}
+import { GeneralObserver } from "./general-observer"
+import Link from "next/link"
 
 function HomePage() {
   const [submitData, updateSubmitData] = useState({})
   const [showBuilder, toggleBuilder] = useState(false)
-  const HomeRef = useRef(null)
-  const [isPlayFeature, setFeaturePlay] = useState(false)
-  const [isPlayCodeCompare, setCodeComparePlay] = useState(false)
-  const [isIsolatePlay, setIsolatePlay] = useState(false)
+  const HomeRef = useRef<HTMLDivElement>(null)
+
+  const [featurePlay, setFeaturePlay] = useState(false)
+  const [codeComparePlay, setCodeComparePlay] = useState(false)
+  const [isolatePlay, setIsolatePlay] = useState(false)
   // const [isCardPlay, setCardPlay] = useState(false)
-  const [isPlayRender] = useState(false)
+  const [renderPlay, setRenderPlay] = useState(false)
   const [formUpdated, setFormUpdated] = useState(false)
-  const [isPlayWatch, setWatchPlay] = useState(false)
-  const router = useRouter()
+  const [watchPlay, setWatchPlay] = useState(false)
+  const { query } = useRouter()
 
   const onSubmit = (data) => {
     updateSubmitData(data)
   }
 
   useEffect(() => {
-    if (window.location.search.startsWith("?goToDemo")) {
+    if (query["goToDemo"] === "") {
       setTimeout(() => {
-        HomeRef.current.scrollIntoView({ behavior: "smooth" })
+        HomeRef.current?.scrollIntoView({ behavior: "smooth" })
 
-        if (window.location.search.startsWith("?goToDemo&updated=true")) {
+        if (query["updated"]) {
           setFormUpdated(true)
         }
       }, 100)
     }
-
-    if (!IntersectionObserver) {
-      setFeaturePlay(true)
-      setCodeComparePlay(true)
-    }
-
-    const featureList = document.querySelector("#featureLast")
-    const codeComparison = document.querySelector("#codeComparison")
-    const isolate = document.querySelector("#isolate")
-    const watch = document.querySelector("#watch")
-    // const card = document.querySelector("#card")
-
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          if (entry.target === featureList && !isPlayFeature) {
-            setFeaturePlay(true)
-          }
-          if (entry.target === codeComparison && !isPlayCodeCompare) {
-            setCodeComparePlay(true)
-          }
-          if (entry.target === isolate && !isIsolatePlay) {
-            setIsolatePlay(true)
-          }
-          if (entry.target === watch && !isPlayWatch) {
-            setWatchPlay(true)
-          }
-          // if (entry.target === card && !isCardPlay) {
-          //   setCardPlay(true)
-          // }
-        }
-      })
-    }, options)
-
-    observer.observe(featureList)
-    observer.observe(codeComparison)
-    observer.observe(isolate)
-    observer.observe(watch)
-    // observer.observe(card)
-
-    return () => observer.disconnect()
-  }, [])
+  }, [query])
 
   return (
     <div className={styles.root}>
@@ -102,17 +59,44 @@ function HomePage() {
         homeRef={HomeRef}
       />
 
-      <FeaturesList isPlayFeature={isPlayFeature} />
-
+      <GeneralObserver
+        onEnter={() => {
+          setFeaturePlay(true)
+        }}
+      >
+        <FeaturesList isPlayFeature={featurePlay} />
+      </GeneralObserver>
       <SponsorsList />
 
-      <CodeCompareSection isPlayCodeCompare={isPlayCodeCompare} />
-
-      <IsolateRender isIsolatePlay={isIsolatePlay} />
-
-      <Watcher isPlayWatch={isPlayWatch} />
+      <GeneralObserver
+        onEnter={() => {
+          setCodeComparePlay(true)
+        }}
+      >
+        <CodeCompareSection isPlayCodeCompare={codeComparePlay} />
+      </GeneralObserver>
+      <GeneralObserver
+        onEnter={() => {
+          setIsolatePlay(true)
+        }}
+      >
+        <IsolateRender isIsolatePlay={isolatePlay} />
+      </GeneralObserver>
+      <GeneralObserver
+        onEnter={() => {
+          setWatchPlay(true)
+        }}
+      >
+        <Watcher isPlayWatch={watchPlay} />
+      </GeneralObserver>
 
-      <CodePerfCompareSection isPlayRender={isPlayRender} />
+      <GeneralObserver
+        onEnter={() => {
+          setRenderPlay(true)
+        }}
+      >
+        <CodePerfCompareSection isPlayRender={renderPlay} />
+      </GeneralObserver>
 
       <div className={containerStyles.centerContent}>
         <h1 className={typographyStyles.h1}>Highlights</h1>
@@ -305,22 +289,12 @@ function HomePage() {
             maxWidth: 500,
           }}
         >
-          <button
-            className={buttonStyles.primaryButton}
-            onClick={() => {
-              router.push("get-started")
-            }}
-          >
+          <Link href="/get-started" className={buttonStyles.primaryButton}>
             {home.getStarted}
-          </button>
-          <button
-            className={buttonStyles.primaryButton}
-            onClick={() => {
-              router.push("docs")
-            }}
-          >
+          </Link>
+          <Link href="/docs" className={buttonStyles.primaryButton}>
             API
-          </button>
+          </Link>
         </div>
       </section>
 
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index f66b0e5ba..fbdbe7cec 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -6,10 +6,9 @@ import useWindowSize from "./utils/useWindowSize"
 import { LARGE_SCREEN } from "../styles/breakpoints"
 
 const Search = () => {
-  const timer = useRef<any>({})
   const { actions, state } = useStateMachine({ updateSetting })
   const { width } = useWindowSize()
-  const searchRef = useRef(null)
+  const searchRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     window?.docsearch?.({
@@ -20,12 +19,11 @@ const Search = () => {
     })
 
     return () => {
-      clearTimeout(timer.current)
       actions.updateSetting({
         isFocusOnSearch: false,
       })
     }
-  }, [])
+  }, [actions])
 
   useEffect(() => {
     if (LARGE_SCREEN <= width) {
@@ -36,9 +34,9 @@ const Search = () => {
       actions.updateSetting({
         isFocusOnSearch: false,
       })
-      searchRef.current.blur()
+      searchRef.current?.blur()
     }
-  }, [width])
+  }, [width, actions])
 
   return (
     <>
@@ -53,22 +51,12 @@ const Search = () => {
           aria-label="search input"
           id="algolia-doc-search"
           ref={searchRef}
-          {...(state.setting?.isFocusOnSearch || width > LARGE_SCREEN
-            ? {
-                placeholder: "Search ...",
-              }
-            : {
-                style: {
-                  color: "white",
-                },
-              })}
           onFocus={() =>
             actions.updateSetting({
               isFocusOnSearch: true,
             })
           }
           onBlur={() => {
-            timer.current && clearTimeout(timer.current)
             if (LARGE_SCREEN > width) {
               actions.updateSetting({
                 isFocusOnSearch: false,
diff --git a/src/components/Watcher.tsx b/src/components/Watcher.tsx
index c75c866ea..5f53bab2b 100644
--- a/src/components/Watcher.tsx
+++ b/src/components/Watcher.tsx
@@ -56,42 +56,42 @@ const WatchGroup = ({
 }
 
 const Watcher = ({ isPlayWatch }: { isPlayWatch: boolean }) => {
-  let timer
   const { register, control, setValue } = useForm()
 
   useEffect(() => {
+    if (!isPlayWatch) {
+      return
+    }
     let i = 0
-    if (isPlayWatch) {
-      timer = setInterval(() => {
-        if (i > 12) {
-          setValue(
-            "test",
-            i === 13
-              ? "W"
-              : i === 14
-              ? "Wa"
-              : i === 15
-              ? "Wat"
-              : i === 16
-              ? "Watc"
-              : i === 17
-              ? "Watch"
-              : i === 18
-              ? "Watchi"
-              : i === 19
-              ? "Watchin"
-              : i === 20
-              ? "Watching"
-              : "Watching."
-          )
-        }
+    const timer = setInterval(() => {
+      if (i > 12) {
+        setValue(
+          "test",
+          i === 13
+            ? "W"
+            : i === 14
+            ? "Wa"
+            : i === 15
+            ? "Wat"
+            : i === 16
+            ? "Watc"
+            : i === 17
+            ? "Watch"
+            : i === 18
+            ? "Watchi"
+            : i === 19
+            ? "Watchin"
+            : i === 20
+            ? "Watching"
+            : "Watching."
+        )
+      }
 
-        if (i > 20) {
-          clearTimeout(timer)
-        }
-        i++
-      }, 200)
-    }
+      if (i > 20) {
+        clearTimeout(timer)
+      }
+      i++
+    }, 200)
 
     return () => clearTimeout(timer)
   }, [setValue, isPlayWatch])
diff --git a/src/components/general-observer.tsx b/src/components/general-observer.tsx
index ea1a47ebd..81800ea16 100644
--- a/src/components/general-observer.tsx
+++ b/src/components/general-observer.tsx
@@ -10,16 +10,15 @@ import {
 interface IGeneralObserverProps {
   /** React Children */
   children: ReactNode
+  placeholder?: ReactNode
   /** Fires when IntersectionObserver enters viewport */
   onEnter?: (id?: string) => void
-  /** The height of the placeholder div before the component renders in */
-  height?: number
 }
 
 export const GeneralObserver: FunctionComponent<IGeneralObserverProps> = ({
   children,
   onEnter,
-  height = 0,
+  placeholder,
 }) => {
   const ref = useRef<HTMLElement>(null)
   const [isChildVisible, setIsChildVisible] = useState(false)
@@ -27,25 +26,32 @@ export const GeneralObserver: FunctionComponent<IGeneralObserverProps> = ({
   useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
-        if (entry.intersectionRatio > 0) {
+        if (entry.isIntersecting) {
           setIsChildVisible(true)
           onEnter && onEnter()
         }
       },
       {
-        root: null,
-        rootMargin: "400px",
-        threshold: 0,
+        rootMargin: "0px 0px",
+        threshold: [1],
       }
     )
     if (ref && ref.current) {
       observer.observe(ref.current)
     }
+
+    return () => observer.disconnect()
   }, [ref, onEnter])
 
+  let slot = children
+
+  if (placeholder && isChildVisible) {
+    slot = placeholder
+  }
+
   return (
     <div ref={ref as RefObject<HTMLDivElement>} data-testid="general-observer">
-      {isChildVisible ? children : <div style={{ height, width: "100%" }} />}
+      {slot}
     </div>
   )
 }
diff --git a/src/components/mdx/youtube.tsx b/src/components/mdx/youtube.tsx
index e7ab89c79..eb97b31c3 100644
--- a/src/components/mdx/youtube.tsx
+++ b/src/components/mdx/youtube.tsx
@@ -11,7 +11,7 @@ export interface IYouTubeProps {
   aspectRatio?: "1:1" | "16:9" | "4:3" | "3:2" | "8:5"
   /** Skip to a time in the video */
   skipTo?: {
-    h?: number
+    h: number
     m: number
     s: number
   }
@@ -30,7 +30,7 @@ export const YouTube: FunctionComponent<IYouTubeProps> = ({
 }: IYouTubeProps) => {
   const { h, m, s } = skipTo
 
-  const tH = h! * 60
+  const tH = h * 60
   const tM = m * 60
 
   const startTime = tH + tM + s
diff --git a/src/components/utils/useWindowSize.ts b/src/components/utils/useWindowSize.ts
index 990f3abb9..da668c179 100644
--- a/src/components/utils/useWindowSize.ts
+++ b/src/components/utils/useWindowSize.ts
@@ -1,14 +1,14 @@
 import { useState, useEffect } from "react"
 
 interface Size {
-  width: number | undefined
-  height: number | undefined
+  width: number
+  height: number
 }
 
 export default function useWindowSize(): Size {
   const [windowSize, setWindowSize] = useState<Size>({
-    width: undefined,
-    height: undefined,
+    width: 0,
+    height: 0,
   })
 
   useEffect(() => {

From 0b06467eb2d85b81e499898cf6f58ea564e1463e Mon Sep 17 00:00:00 2001
From: Lucas <aranlucas@gmail.com>
Date: Fri, 9 Jun 2023 16:58:02 -0700
Subject: [PATCH 4/5] feat: moving all code blocks to same component

---
 src/components/CodeArea.module.css |  12 --
 src/components/CodeArea.tsx        |  60 +++-------
 src/components/layout.css          | 171 +----------------------------
 src/components/mdx/code.tsx        |  14 ++-
 src/components/mdx/theme.ts        |   2 +
 5 files changed, 30 insertions(+), 229 deletions(-)

diff --git a/src/components/CodeArea.module.css b/src/components/CodeArea.module.css
index bc5e95a41..85da6dede 100644
--- a/src/components/CodeArea.module.css
+++ b/src/components/CodeArea.module.css
@@ -69,15 +69,3 @@
   position: relative;
   margin-right: 8px;
 }
-
-.wrapper pre {
-  line-height: 1.5 !important;
-}
-
-.wrapper pre code {
-  display: none;
-}
-
-.wrapper pre code.showCode {
-  display: block;
-}
diff --git a/src/components/CodeArea.tsx b/src/components/CodeArea.tsx
index 8528edfe2..1e713fa62 100644
--- a/src/components/CodeArea.tsx
+++ b/src/components/CodeArea.tsx
@@ -1,9 +1,9 @@
 import copyClipBoard from "./utils/copyClipBoard"
-import { highlightAllUnder } from "prismjs"
 import ClipBoard from "./ClipBoard"
 import styles from "./CodeArea.module.css"
-import { CSSProperties, useEffect, useRef, useState } from "react"
+import { useRef, useState } from "react"
 import { CodeSandBoxLink } from "./CodeSandbox"
+import { PrismSyntaxHighlight } from "./mdx/code"
 
 const ToggleTypes = {
   js: "JS",
@@ -19,7 +19,6 @@ export default function CodeArea({
   tsUrl,
   withOutCopy,
   isExpo,
-  style,
 }: {
   rawData?: string
   tsRawData?: string
@@ -28,7 +27,6 @@ export default function CodeArea({
   tsUrl?: string
   withOutCopy?: boolean
   isExpo?: boolean
-  style?: CSSProperties
 }) {
   const [currentType, setType] = useState<
     (typeof ToggleTypes)[keyof typeof ToggleTypes]
@@ -39,26 +37,6 @@ export default function CodeArea({
   )
   const codeAreaRef = useRef<HTMLDivElement | null>(null)
 
-  const getData = () => {
-    switch (currentType) {
-      case ToggleTypes.js:
-        return rawData
-      case ToggleTypes.ts:
-        return tsRawData
-      default:
-        return rawTypes
-    }
-  }
-
-  useEffect(() => {
-    const highlight = async () => {
-      if (codeAreaRef.current) {
-        highlightAllUnder(codeAreaRef.current)
-      }
-    }
-    highlight()
-  }, [])
-
   return (
     <section
       style={{
@@ -99,7 +77,7 @@ export default function CodeArea({
         {!withOutCopy && (
           <ClipBoard
             className={`${styles.button} ${styles.copyButton}`}
-            onClick={() => copyClipBoard(getData())}
+            onClick={() => copyClipBoard(codeAreaRef.current?.innerText || "")}
           />
         )}
 
@@ -115,29 +93,21 @@ export default function CodeArea({
       </div>
 
       <div className={styles.wrapper} ref={codeAreaRef}>
-        <pre style={style} className="raw-code">
-          <code
-            className={`language-javascript ${
-              currentType === ToggleTypes.js ? styles.showCode : ""
-            }`}
-          >
+        {currentType === ToggleTypes.js && (
+          <PrismSyntaxHighlight className="language-javascript">
             {rawData}
-          </code>
-          <code
-            className={`language-javascript ${
-              currentType === ToggleTypes.ts ? styles.showCode : ""
-            }`}
-          >
+          </PrismSyntaxHighlight>
+        )}
+        {currentType === ToggleTypes.ts && (
+          <PrismSyntaxHighlight className="language-typescript">
             {tsRawData}
-          </code>
-          <code
-            className={`language-javascript ${
-              currentType === ToggleTypes.types ? styles.showCode : ""
-            }`}
-          >
+          </PrismSyntaxHighlight>
+        )}
+        {currentType === ToggleTypes.types && (
+          <PrismSyntaxHighlight className="language-javascript">
             {rawTypes}
-          </code>
-        </pre>
+          </PrismSyntaxHighlight>
+        )}
       </div>
     </section>
   )
diff --git a/src/components/layout.css b/src/components/layout.css
index 571b784c2..1e2987a35 100644
--- a/src/components/layout.css
+++ b/src/components/layout.css
@@ -704,21 +704,7 @@ a.skip-main:active {
   background-color: currentColor;
 }
 
-/**
-* xonokai theme for JavaScript, CSS and HTML
-* based on: https://github.com/MoOx/sass-prism-theme-base by Maxime Thirouin ~ MoOx --> http://moox.fr/ , which is Loosely based on Monokai textmate theme by http://www.monokai.nl/
-* license: MIT; http://moox.mit-license.org/
-*/
-.raw-code {
-  padding: 15px;
-  font-size: 0.8rem;
-  background: var(--color-primary);
-  border-radius: 4px;
-}
-
-code[class*="language-"],
 pre[class*="language-"] {
-  background: var(--color-purple);
   -moz-tab-size: 2;
   -o-tab-size: 2;
   tab-size: 2;
@@ -735,10 +721,6 @@ pre[class*="language-"] {
   text-shadow: none;
 }
 
-pre > code[class*="language-"] {
-  font-size: 1em;
-}
-
 pre[class*="language-"] {
   padding: 15px;
   border-radius: 4px;
@@ -746,142 +728,8 @@ pre[class*="language-"] {
   position: relative;
 }
 
-.token.namespace {
-  opacity: 0.7;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #6f705e;
-}
-
-.token.operator,
-.token.boolean,
-.token.number {
-  color: #a77afe;
-}
-
-.token.attr-name,
-.token.string {
-  color: #e6d06c;
-}
-
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: #e6d06c;
-}
-
-.token.selector,
-.token.inserted {
-  color: #a6e22d;
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword,
-.token.important,
-.token.deleted {
-  color: #ef3b7d;
-}
-
-.token.regex,
-.token.statement {
-  color: #76d9e6;
-}
-
-.token.placeholder,
-.token.variable {
-  color: #fff;
-}
-
-.token.important,
-.token.statement,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.punctuation {
-  color: #bebec5;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-code.language-markup {
-  color: #f9f9f9;
-}
-
-code.language-markup .token.tag {
-  color: #ef3b7d;
-}
-
-code.language-markup .token.attr-name {
-  color: #a6e22d;
-}
-
-code.language-markup .token.attr-value {
-  color: #e6d06c;
-}
-
-code.language-markup .token.style,
-code.language-markup .token.script {
-  color: #76d9e6;
-}
-
-code.language-markup .token.script .token.keyword {
-  color: #76d9e6;
-}
-
-/* Line highlight plugin */
-pre[class*="language-"][data-line] {
-  position: relative;
-  padding: 1em 0 1em 3em;
-}
-
-pre[data-line] .line-highlight {
-  position: absolute;
-  left: 0;
-  right: 0;
-  padding: 0;
-  margin-top: 1em;
-  background: rgba(255, 255, 255, 0.08);
-  pointer-events: none;
-  line-height: inherit;
-  white-space: pre;
-}
-
-pre[data-line] .line-highlight:before,
-pre[data-line] .line-highlight[data-end]:after {
-  content: attr(data-start);
-  position: absolute;
-  top: 0.4em;
-  left: 0.6em;
-  min-width: 1em;
-  padding: 0.2em 0.5em;
-  background-color: rgba(255, 255, 255, 0.4);
-  color: var(--color-text);
-  font: bold 65%/1 sans-serif;
-  height: 1em;
-  line-height: 1em;
-  text-align: center;
-  border-radius: 999px;
-  text-shadow: none;
-  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
-}
-
-pre[data-line] .line-highlight[data-end]:after {
-  content: attr(data-end);
-  top: auto;
-  bottom: 0.4em;
+.light pre[class*="language-"] {
+  border: 1px solid var(--color-light-grey);
 }
 
 @keyframes heart {
@@ -944,21 +792,6 @@ pre[data-line] .line-highlight[data-end]:after {
   box-shadow: none !important;
 }
 
-.light code[class*="language-"],
-.light pre[class*="language-"] {
-  background: white;
-  color: black;
-}
-
-.light pre[class*="language-"] {
-  border: 1px solid var(--color-light-grey);
-}
-
-.light .token.attr-name,
-.light .token.string {
-  color: #e68600;
-}
-
 @media (min-width: 768px) {
   .light ::-webkit-scrollbar {
   }
diff --git a/src/components/mdx/code.tsx b/src/components/mdx/code.tsx
index 82e53d7f4..6f95062c0 100644
--- a/src/components/mdx/code.tsx
+++ b/src/components/mdx/code.tsx
@@ -1,6 +1,7 @@
 import { Highlight } from "prism-react-renderer"
 import { theme, lightTheme } from "./theme"
 import { useTheme } from "next-themes"
+import { useEffect, useState } from "react"
 
 const prism = {
   dark: theme,
@@ -13,18 +14,25 @@ function usePrismTheme() {
   const darkModeTheme = prism.dark || lightModeTheme
   const prismTheme = theme === "light" ? lightModeTheme : darkModeTheme
 
-  return prismTheme
+  const [finalTheme, setFinalTheme] = useState(prismTheme)
+
+  useEffect(() => {
+    setFinalTheme(prismTheme)
+  }, [prismTheme])
+
+  return finalTheme
 }
 
 export const PrismSyntaxHighlight = ({ children, className }) => {
   const language = className.replace(/language-/gm, "")
+
   const currentTheme = usePrismTheme()
 
   return (
-    <Highlight code={children} language={language} theme={currentTheme}>
+    <Highlight code={children.trim()} language={language} theme={currentTheme}>
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <pre className={className} style={style}>
-          {tokens.slice(0, -1).map((line, i) => (
+          {tokens.map((line, i) => (
             <div key={i} {...getLineProps({ line, key: i })}>
               {line.map((token, key) => (
                 <span key={key} {...getTokenProps({ token, key })} />
diff --git a/src/components/mdx/theme.ts b/src/components/mdx/theme.ts
index 7d2c6c66f..58b1ae55e 100644
--- a/src/components/mdx/theme.ts
+++ b/src/components/mdx/theme.ts
@@ -3,6 +3,7 @@ import { PrismTheme } from "prism-react-renderer"
 
 export const theme: PrismTheme = {
   plain: {
+    backgroundColor: "var(--color-purple)",
     color: "#f8f8f2",
   },
   styles: [
@@ -119,6 +120,7 @@ export const theme: PrismTheme = {
 
 export const lightTheme: PrismTheme = {
   plain: {
+    backgroundColor: "white",
     color: "black",
   },
   styles: [

From 8e0199818dafc42231c0d854e53f7e915f8dc0cf Mon Sep 17 00:00:00 2001
From: Lucas <aranlucas@gmail.com>
Date: Tue, 13 Jun 2023 13:40:25 -0700
Subject: [PATCH 5/5] feat: adding table styles

---
 src/components/mdx/mdx.tsx  |  8 ++++++++
 src/styles/table.module.css | 10 +---------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/mdx/mdx.tsx b/src/components/mdx/mdx.tsx
index 8b0ffbc5c..5e65c1f2d 100644
--- a/src/components/mdx/mdx.tsx
+++ b/src/components/mdx/mdx.tsx
@@ -7,6 +7,7 @@ import Popup from "../Popup"
 import { Components } from "@mdx-js/react/lib"
 import { Admonition } from "../Admonition"
 import { CodeSandBoxLink } from "../CodeSandbox"
+import tableStyles from "../../styles/table.module.css"
 
 export const MDXComponents: Components = {
   // p: P,
@@ -23,6 +24,13 @@ export const MDXComponents: Components = {
   // a: Link,
   // img: ResponsiveImage,
   // Layout,
+  table(props) {
+    return (
+      <div className={tableStyles.tableWrapper}>
+        <table className={tableStyles.table} {...props} />
+      </div>
+    )
+  },
   Admonition,
   Popup,
   TypeText,
diff --git a/src/styles/table.module.css b/src/styles/table.module.css
index 6e591734b..f3107d424 100644
--- a/src/styles/table.module.css
+++ b/src/styles/table.module.css
@@ -1,6 +1,6 @@
 .table {
-  margin-top: 15px;
   border-collapse: collapse;
+  width: 100%;
 }
 
 .table td {
@@ -15,18 +15,10 @@
   margin-top: 0 !important;
 }
 
-.table td > p:last-child {
-  margin-bottom: 0;
-}
-
 .table td:last-child {
   padding-right: 0;
 }
 
-.table td > pre {
-  margin: 0;
-}
-
 .tableWrapper {
   -webkit-overflow-scrolling: touch;
   overflow-y: hidden;