Update resolver examples to use inference. Improve highlighting. (#1155)

colinhacks · web-flow · commit 8cc05b47c80c · 2025-06-10T08:03:44.000+10:00
* Update resolver examples to use inference. Improve highlighting.

* Change all ts codeblocks to tsx
diff --git a/src/content/docs/usecontroller/controller.mdx b/src/content/docs/usecontroller/controller.mdx
@@ -63,7 +63,7 @@ The following table contains information about properties which `Controller` pro
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
+```tsx 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"
diff --git a/src/content/docs/useform.mdx b/src/content/docs/useform.mdx
@@ -445,16 +445,11 @@ npm install @hookform/resolvers
 
 <TabGroup buttonLabels={["Yup","Zod","Joi","Ajv","Vest", "Custom"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-apply-validation-ts-forked-nmbyh"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-apply-validation-ts-forked-nmbyh"
 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({
@@ -464,7 +459,7 @@ const schema = yup
   .required()
 
 const App = () => {
-  const { register, handleSubmit } = useForm<Inputs>({
+  const { register, handleSubmit } = useForm({
     resolver: yupResolver(schema), // yup, joi and even your own.
   })
 
@@ -478,7 +473,7 @@ const App = () => {
 }
 ```
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-zod-resolver-ts-example-forked-w72vp"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-zod-resolver-ts-example-forked-w72vp"
 import { useForm } from "react-hook-form"
 import { zodResolver } from "@hookform/resolvers/zod"
 import * as z from "zod"
@@ -491,16 +486,15 @@ const schema = z.object({
 type Schema = z.infer<typeof schema>
 
 const App = () => {
-  const { register, handleSubmit } = useForm<Schema>({
+  const { register, handleSubmit } = useForm({
     resolver: zodResolver(schema),
   })
 
-  const onSubmit = (data: Schema) => {
-    console.log(data)
-  }
-
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
+    <form onSubmit={handleSubmit((data) => {
+      // handle inputs
+      console.log(data);
+    })}>
       <input {...register("name")} />
       <input {...register("age", { valueAsNumber: true })} type="number" />
       <input type="submit" />
@@ -509,7 +503,7 @@ const App = () => {
 }
 ```
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-joiresolver-v6-ts-forked-5pseh"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-joiresolver-v6-ts-forked-5pseh"
 import { useForm } from "react-hook-form";
 import { joiResolver } from "@hookform/resolvers/joi";
 import Joi from "joi";
@@ -534,15 +528,15 @@ const App = () => {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register("name"} />
-      <input type="number" {...register("age"} />
+      <input {...register("name")} />
+      <input type="number" {...register("age")} />
       <input type="submit" />
     </form>
   );
 }
 ```
 
-```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-ajvresolver-vr3imc"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-ajvresolver-vr3imc"
 import { useForm } from "react-hook-form"
 import { ajvResolver } from "@hookform/resolvers/ajv"
 
@@ -586,7 +580,7 @@ const App = () => {
 }
 ```
 
-```javascript copy sandbox="https://codesandbox.io/s/vest-8q874"
+```tsx copy sandbox="https://codesandbox.io/s/vest-8q874"
 import * as React from "react"
 import { useForm } from "react-hook-form"
 import { vestResolver } from "@hookform/resolvers/vest"
@@ -633,7 +627,7 @@ const App = () => {
 }
 ```
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-customresoliver-ts-v7-juc63"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-customresoliver-ts-v7-juc63"
 import * as React from "react"
 import { useForm } from "react-hook-form"
 import * as Joi from "joi"
diff --git a/src/content/docs/useform/clearerrors.mdx b/src/content/docs/useform/clearerrors.mdx
@@ -43,7 +43,7 @@ This function can manually clear errors in the form.
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-clearerrors-w3ymx"
+```tsx sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-clearerrors-w3ymx"
 import * as React from "react"
 import { useForm } from "react-hook-form"
 
diff --git a/src/content/docs/useform/control.mdx b/src/content/docs/useform/control.mdx
@@ -20,7 +20,7 @@ This object contains methods for registering components into React Hook Form.
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
 import { useForm, Controller } from "react-hook-form"
 import { TextField } from "@material-ui/core"
 
diff --git a/src/content/docs/useform/getvalues.mdx b/src/content/docs/useform/getvalues.mdx
@@ -49,7 +49,7 @@ The example below shows what to expect when you invoke `getValues` method.
 
 <TabGroup buttonLabels={["TS", "JS", "Types"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg"
 import { useForm } from "react-hook-form"
 
 type FormInputs = {
@@ -107,7 +107,7 @@ export default function App() {
 }
 ```
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg"
 import React from "react"
 import { useForm } from "react-hook-form"
 
diff --git a/src/content/docs/useform/handlesubmit.mdx b/src/content/docs/useform/handlesubmit.mdx
@@ -54,7 +54,7 @@ This function will receive the form data if form validation is successful.
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-lcrtu"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-lcrtu"
 import { useForm, SubmitHandler, SubmitErrorHandler } from "react-hook-form"
 
 type FormValues = {
diff --git a/src/content/docs/useform/reset.mdx b/src/content/docs/useform/reset.mdx
@@ -60,7 +60,7 @@ Reset the entire form state, fields reference, and subscriptions. There are opti
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-reset-v7-ts-pu901"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-reset-v7-ts-pu901"
 import { useForm } from "react-hook-form"
 
 interface UseFormInputs {
@@ -155,7 +155,7 @@ export default function App() {
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
 import { useForm, Controller } from "react-hook-form"
 import { TextField } from "@material-ui/core"
 
diff --git a/src/content/docs/useform/seterror.mdx b/src/content/docs/useform/seterror.mdx
@@ -55,7 +55,7 @@ The function allows you to manually set one or more errors.
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-seterror-nfxxu"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-seterror-nfxxu"
 import * as React from "react"
 import { useForm } from "react-hook-form"
 
@@ -127,7 +127,7 @@ const App = () => {
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-seterror-8h440"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-seterror-8h440"
 import * as React from "react"
 import { useForm } from "react-hook-form"
 
@@ -244,7 +244,7 @@ const App = () => {
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript copy
+```tsx copy
 import * as React from "react"
 import { useForm } from "react-hook-form"
 
diff --git a/src/content/docs/useform/setfocus.mdx b/src/content/docs/useform/setfocus.mdx
@@ -30,7 +30,7 @@ This method will allow users to programmatically focus on input. Make sure input
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/setfocus-rolus"
+```tsx copy sandbox="https://codesandbox.io/s/setfocus-rolus"
 import * as React from "react"
 import { useForm } from "react-hook-form"
 
diff --git a/src/content/docs/useform/setvalue.mdx b/src/content/docs/useform/setvalue.mdx
@@ -120,7 +120,7 @@ const App = () => {
 
 **Dependant Fields**
 
-```typescript sandbox="https://codesandbox.io/s/dependant-field-dwin1"
+```tsx sandbox="https://codesandbox.io/s/dependant-field-dwin1"
 import * as React from "react"
 import { useForm } from "react-hook-form"
 
diff --git a/src/content/docs/useform/subscribe.mdx b/src/content/docs/useform/subscribe.mdx
@@ -49,7 +49,7 @@ Subscribe to [`formState`](/docs/useform/formState) changes and value updates. Y
 
 ---
 
-```typescript copy
+```tsx copy
 import { useForm } from "react-hook-form"
 
 type FormInputs = {
diff --git a/src/content/docs/useform/trigger.mdx b/src/content/docs/useform/trigger.mdx
@@ -31,7 +31,7 @@ Isolate render optimisation only applicable for targeting a single field name wi
 
 <TabGroup buttonLabels={["TS", "JS"]} >
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-ts-triggervalidation-forked-xs7hl"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v6-ts-triggervalidation-forked-xs7hl"
 import { useForm } from "react-hook-form"
 
 type FormInputs = {
diff --git a/src/content/docs/useform/unregister.mdx b/src/content/docs/useform/unregister.mdx
@@ -77,7 +77,7 @@ The example below shows what to expect when you invoke the `unregister` method.
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-unregister-v6-ts-forked-4k2ey"
+```tsx 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"
 
diff --git a/src/content/docs/useform/watch.mdx b/src/content/docs/useform/watch.mdx
@@ -102,7 +102,7 @@ Subscribe to field update/change without trigger re-render.
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d"
 import { useForm } from "react-hook-form"
 
 interface IFormInputs {
@@ -179,7 +179,7 @@ function App() {
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/watch-with-usefieldarray-z54xwd"
+```tsx copy sandbox="https://codesandbox.io/s/watch-with-usefieldarray-z54xwd"
 import * as React from "react"
 import { useForm, useFieldArray } from "react-hook-form"
 
diff --git a/src/content/docs/useformstate/errormessage.mdx b/src/content/docs/useformstate/errormessage.mdx
@@ -32,7 +32,7 @@ npm install @hookform/error-message
 
 <TabGroup buttonLabels={["TS", "JS"]} >
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-errormessage-d1ues"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-errormessage-d1ues"
 import { useForm } from "react-hook-form"
 import { ErrorMessage } from "@hookform/error-message"
 
@@ -104,7 +104,7 @@ export default function App() {
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-ts-errormessage-multiple-error-messages-forked-sy5f0"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v6-ts-errormessage-multiple-error-messages-forked-sy5f0"
 import { useForm } from "react-hook-form"
 import { ErrorMessage } from "@hookform/error-message"
 
diff --git a/src/content/docs/usewatch.mdx b/src/content/docs/usewatch.mdx
@@ -69,7 +69,7 @@ Behaves similarly to the `watch` API, however, this will isolate re-rendering at
 
 <TabGroup buttonLabels={["TS", "JS"]} >
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e"
 import { useForm, useWatch } from "react-hook-form"
 
 interface FormInputs {
diff --git a/src/content/faqs.mdx b/src/content/faqs.mdx
@@ -126,7 +126,7 @@ React Hook Form needs a `ref` to collect the input value. However, you may want
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript copy
+```tsx copy
 import { useRef, useImperativeHandle } from "react"
 import { useForm } from "react-hook-form"
 
diff --git a/src/content/get-started.mdx b/src/content/get-started.mdx
@@ -18,7 +18,7 @@ The following code excerpt demonstrates a basic usage example:
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-get-started-ts-5ksmm"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-get-started-ts-5ksmm"
 import { useForm, SubmitHandler } from "react-hook-form"
 
 type Inputs = {
@@ -104,7 +104,7 @@ One of the key concepts in React Hook Form is to **`register`** your component i
 
 <TabGroup buttonLabels={["TS", "JS"]} >
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-get-started-ts-5ksmm"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-get-started-ts-5ksmm"
 import ReactDOM from "react-dom"
 import { useForm, SubmitHandler } from "react-hook-form"
 
@@ -180,7 +180,7 @@ You can read more detail on each rule in the [register section](/docs#register).
 
 <TabGroup buttonLabels={["TS", "JS"]} >
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-apply-validation-ts-forked-nmbyh"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-apply-validation-ts-forked-nmbyh"
 import { useForm, SubmitHandler } from "react-hook-form"
 
 interface IFormInput {
@@ -230,7 +230,7 @@ Integrating an existing form should be simple. The important step is to `registe
 
 <TabGroup buttonLabels={["TS", "JS"]} >
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-adapting-existing-form-ts-uzfxm"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-adapting-existing-form-ts-uzfxm"
 import { Path, useForm, UseFormRegister, SubmitHandler } from "react-hook-form"
 
 interface IFormValues {
@@ -330,7 +330,7 @@ React Hook Form has made it easy to integrate with external UI component librari
 
 <TabGroup buttonLabels={["TS", "JS"]} >
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-with-ui-library-ts-forked-qjgkx"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-with-ui-library-ts-forked-qjgkx"
 import Select from "react-select"
 import { useForm, Controller, SubmitHandler } from "react-hook-form"
 import { Input } from "@material-ui/core"
@@ -432,7 +432,7 @@ This library embraces uncontrolled components and native HTML inputs. However, i
 
 <TabGroup buttonLabels={["TS", "JS", 'shadcn/ui']} >
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
 import { useForm, Controller, SubmitHandler } from "react-hook-form"
 import { TextField, Checkbox } from "@material-ui/core"
 
@@ -504,14 +504,14 @@ const FormSchema = z.object({
 })
 
 export function InputForm() {
-  const form = useForm<z.infer<typeof FormSchema>>({
+  const form = useForm({
     resolver: zodResolver(FormSchema),
     defaultValues: {
       username: "",
     },
   })
 
-  function onSubmit(data: z.infer<typeof FormSchema>) {
+  function onSubmit(data: z.output<typeof FormSchema>) {
     console.log(data);
   }
 
@@ -538,7 +538,7 @@ export function InputForm() {
 
 <TabGroup buttonLabels={["TS", "JS"]} >
 
-```typescript copy sandbox="https://codesandbox.io/s/usecontroller-forked-4t8cx"
+```tsx copy sandbox="https://codesandbox.io/s/usecontroller-forked-4t8cx"
 import * as React from "react"
 import { useForm, useController, UseControllerProps } from "react-hook-form"
 
@@ -822,7 +822,7 @@ export default function App() {
 
 React Hook Form is built with `TypeScript`, and you can define a `FormData` type to support form values.
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-typescript-qwk7b"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-typescript-qwk7b"
 import * as React from "react"
 import { useForm } from "react-hook-form"
 
diff --git a/src/content/ts.mdx b/src/content/ts.mdx
