Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8cc05b4

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /