Skip to content

Commit 8cc05b4

Browse files
colinhackscolinhacks
authored
Update resolver examples to use inference. Improve highlighting. (#1155)
* Update resolver examples to use inference. Improve highlighting. * Change all ts codeblocks to tsx
1 parent 9e17128 commit 8cc05b4

File tree

19 files changed

+69
-75
lines changed

19 files changed

+69
-75
lines changed

‎src/content/docs/usecontroller/controller.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ The following table contains information about properties which `Controller` pro
6363

6464
<TabGroup buttonLabels={["TS", "JS"]}>
6565

66-
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
66+
```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
6767
import ReactDatePicker from "react-datepicker"
6868
import { TextField } from "@material-ui/core"
6969
import { useForm, Controller } from "react-hook-form"

‎src/content/docs/useform.mdx‎

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -445,16 +445,11 @@ npm install @hookform/resolvers
445445

446446
<TabGroup buttonLabels={["Yup","Zod","Joi","Ajv","Vest", "Custom"]}>
447447

448-
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-apply-validation-ts-forked-nmbyh"
448+
```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-apply-validation-ts-forked-nmbyh"
449449
import { useForm } from "react-hook-form"
450450
import { yupResolver } from "@hookform/resolvers/yup"
451451
import * as yup from "yup"
452452

453-
type Inputs = {
454-
name: string
455-
age: string
456-
}
457-
458453
const schema = yup
459454
.object()
460455
.shape({
@@ -464,7 +459,7 @@ const schema = yup
464459
.required()
465460

466461
const App = () => {
467-
const { register, handleSubmit } = useForm<Inputs>({
462+
const { register, handleSubmit } = useForm({
468463
resolver: yupResolver(schema), // yup, joi and even your own.
469464
})
470465

@@ -478,7 +473,7 @@ const App = () => {
478473
}
479474
```
480475

481-
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-zod-resolver-ts-example-forked-w72vp"
476+
```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-zod-resolver-ts-example-forked-w72vp"
482477
import { useForm } from "react-hook-form"
483478
import { zodResolver } from "@hookform/resolvers/zod"
484479
import * as z from "zod"
@@ -491,16 +486,15 @@ const schema = z.object({
491486
type Schema = z.infer<typeof schema>
492487

493488
const App = () => {
494-
const { register, handleSubmit } = useForm<Schema>({
489+
const { register, handleSubmit } = useForm({
495490
resolver: zodResolver(schema),
496491
})
497492

498-
const onSubmit = (data: Schema) => {
499-
console.log(data)
500-
}
501-
502493
return (
503-
<form onSubmit={handleSubmit(onSubmit)}>
494+
<form onSubmit={handleSubmit((data) => {
495+
// handle inputs
496+
console.log(data);
497+
})}>
504498
<input {...register("name")} />
505499
<input {...register("age", { valueAsNumber: true })} type="number" />
506500
<input type="submit" />
@@ -509,7 +503,7 @@ const App = () => {
509503
}
510504
```
511505

512-
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-joiresolver-v6-ts-forked-5pseh"
506+
```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-joiresolver-v6-ts-forked-5pseh"
513507
import { useForm } from "react-hook-form";
514508
import { joiResolver } from "@hookform/resolvers/joi";
515509
import Joi from "joi";
@@ -534,15 +528,15 @@ const App = () => {
534528

535529
return (
536530
<form onSubmit={handleSubmit(onSubmit)}>
537-
<input {...register("name"} />
538-
<input type="number" {...register("age"} />
531+
<input {...register("name")} />
532+
<input type="number" {...register("age")} />
539533
<input type="submit" />
540534
</form>
541535
);
542536
}
543537
```
544538

545-
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-ajvresolver-vr3imc"
539+
```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-ajvresolver-vr3imc"
546540
import { useForm } from "react-hook-form"
547541
import { ajvResolver } from "@hookform/resolvers/ajv"
548542

@@ -586,7 +580,7 @@ const App = () => {
586580
}
587581
```
588582

589-
```javascript copy sandbox="https://codesandbox.io/s/vest-8q874"
583+
```tsx copy sandbox="https://codesandbox.io/s/vest-8q874"
590584
import * as React from "react"
591585
import { useForm } from "react-hook-form"
592586
import { vestResolver } from "@hookform/resolvers/vest"
@@ -633,7 +627,7 @@ const App = () => {
633627
}
634628
```
635629

636-
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-customresoliver-ts-v7-juc63"
630+
```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-customresoliver-ts-v7-juc63"
637631
import * as React from "react"
638632
import { useForm } from "react-hook-form"
639633
import * as Joi from "joi"

‎src/content/docs/useform/clearerrors.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ This function can manually clear errors in the form.
4343

4444
<TabGroup buttonLabels={["TS", "JS"]}>
4545

46-
```typescript sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-clearerrors-w3ymx"
46+
```tsx sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-clearerrors-w3ymx"
4747
import * as React from "react"
4848
import { useForm } from "react-hook-form"
4949

‎src/content/docs/useform/control.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ This object contains methods for registering components into React Hook Form.
2020

2121
<TabGroup buttonLabels={["TS", "JS"]}>
2222

23-
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
23+
```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
2424
import { useForm, Controller } from "react-hook-form"
2525
import { TextField } from "@material-ui/core"
2626

‎src/content/docs/useform/getvalues.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ The example below shows what to expect when you invoke `getValues` method.
4949

5050
<TabGroup buttonLabels={["TS", "JS", "Types"]}>
5151

52-
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg"
52+
```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg"
5353
import { useForm } from "react-hook-form"
5454

5555
type FormInputs = {
@@ -107,7 +107,7 @@ export default function App() {
107107
}
108108
```
109109

110-
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg"
110+
```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg"
111111
import React from "react"
112112
import { useForm } from "react-hook-form"
113113

‎src/content/docs/useform/handlesubmit.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ This function will receive the form data if form validation is successful.
5454

5555
<TabGroup buttonLabels={["TS", "JS"]}>
5656

57-
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-lcrtu"
57+
```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-lcrtu"
5858
import { useForm, SubmitHandler, SubmitErrorHandler } from "react-hook-form"
5959

6060
type FormValues = {

‎src/content/docs/useform/reset.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ Reset the entire form state, fields reference, and subscriptions. There are opti
6060

6161
<TabGroup buttonLabels={["TS", "JS"]}>
6262

63-
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-reset-v7-ts-pu901"
63+
```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-reset-v7-ts-pu901"
6464
import { useForm } from "react-hook-form"
6565

6666
interface UseFormInputs {
@@ -155,7 +155,7 @@ export default function App() {
155155

156156
<TabGroup buttonLabels={["TS", "JS"]}>
157157

158-
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
158+
```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
159159
import { useForm, Controller } from "react-hook-form"
160160
import { TextField } from "@material-ui/core"
161161

‎src/content/docs/useform/seterror.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ The function allows you to manually set one or more errors.
5555

5656
<TabGroup buttonLabels={["TS", "JS"]}>
5757

58-
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-seterror-nfxxu"
58+
```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-seterror-nfxxu"
5959
import * as React from "react"
6060
import { useForm } from "react-hook-form"
6161

@@ -127,7 +127,7 @@ const App = () => {
127127

128128
<TabGroup buttonLabels={["TS", "JS"]}>
129129

130-
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-seterror-8h440"
130+
```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-seterror-8h440"
131131
import * as React from "react"
132132
import { useForm } from "react-hook-form"
133133

@@ -244,7 +244,7 @@ const App = () => {
244244

245245
<TabGroup buttonLabels={["TS", "JS"]}>
246246

247-
```typescript copy
247+
```tsx copy
248248
import * as React from "react"
249249
import { useForm } from "react-hook-form"
250250

‎src/content/docs/useform/setfocus.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ This method will allow users to programmatically focus on input. Make sure input
3030

3131
<TabGroup buttonLabels={["TS", "JS"]}>
3232

33-
```typescript copy sandbox="https://codesandbox.io/s/setfocus-rolus"
33+
```tsx copy sandbox="https://codesandbox.io/s/setfocus-rolus"
3434
import * as React from "react"
3535
import { useForm } from "react-hook-form"
3636

‎src/content/docs/useform/setvalue.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ const App = () => {
120120

121121
**Dependant Fields**
122122

123-
```typescript sandbox="https://codesandbox.io/s/dependant-field-dwin1"
123+
```tsx sandbox="https://codesandbox.io/s/dependant-field-dwin1"
124124
import * as React from "react"
125125
import { useForm } from "react-hook-form"
126126

0 commit comments

Comments
 (0)