Skip to content

Commit 5c69e15

Browse files
bluebill1049bluebill1049
authored
udpate doc on subscribe (#1146)
* udpate doc on subscribe * update doc and packages * rename to just target * update doc * update format
1 parent 5590cd3 commit 5c69e15

26 files changed

+906
-597
lines changed

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"next-contentlayer": "^0.3.4",
1717
"next-themes": "^0.2.1",
1818
"prism-react-renderer": "^2.4.1",
19-
"prismjs": "^1.29.0",
19+
"prismjs": "^1.30.0",
2020
"react": "18.3.1",
2121
"react-dom": "18.3.1",
2222
"react-github-btn": "1.4.0",
@@ -46,8 +46,8 @@
4646
"eslint-plugin-react-hooks": "5.1.0",
4747
"husky": "^8.0.3",
4848
"lint-staged": "^13.3.0",
49-
"prettier": "^3.4.2",
50-
"typescript": "^5.7.3",
49+
"prettier": "^3.5.3",
50+
"typescript": "^5.8.3",
5151
"typescript-eslint": "8.18.1"
5252
},
5353
"keywords": [

‎pnpm-lock.yaml

Lines changed: 798 additions & 549 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Menu/MenuLinks.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ export const apiLinks: Pages = [
107107
{ pathname: "/docs/useform/unregister", name: "unregister" },
108108
{ pathname: "/docs/useform/formstate", name: "formState" },
109109
{ pathname: "/docs/useform/watch", name: "watch" },
110+
{ pathname: "/docs/useform/subscribe", name: "subscribe" },
110111
{ pathname: "/docs/useform/handlesubmit", name: "handleSubmit" },
111112
{ pathname: "/docs/useform/reset", name: "reset" },
112113
{ pathname: "/docs/useform/resetfield", name: "resetField" },

‎src/components/codeExamples/formState.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
export default `import React from "react";
2-
import { useForm } from "react-hook-form";
1+
export default `import { useForm } from "react-hook-form";
32
43
export default function App() {
54
const {

‎src/components/codeExamples/formStateUseEffectTs.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
export default `import React from "react";
2-
import { useForm } from "react-hook-form";
1+
export default `import { useForm } from "react-hook-form";
32
type FormInputs = {
43
test: string
54
}

‎src/components/codeExamples/useFieldArray.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
export default `import React from "react";
2-
import { useForm, useFieldArray } from "react-hook-form";
1+
export default `import { useForm, useFieldArray } from "react-hook-form";
32
43
function App() {
54
const { register, control, handleSubmit, reset, trigger, setError } = useForm({

‎src/components/layout.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,9 @@ body {
5656
-ms-font-feature-settings: "kern", "liga", "clig", "calt";
5757
-webkit-font-feature-settings: "kern", "liga", "clig", "calt";
5858
font-feature-settings: "kern", "liga", "clig", "calt";
59-
font-family: "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
60-
"Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
59+
font-family:
60+
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
61+
"Droid Sans", "Helvetica Neue", sans-serif;
6162
-webkit-font-smoothing: antialiased;
6263
-moz-osx-font-smoothing: grayscale;
6364
font-size: 0.9rem;

‎src/components/sponsorsList.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,11 @@ export function SponsorsList() {
2323
>
2424
<img src="/images/route4me.png" alt="route4me" />
2525
</a>
26-
<a href="https://www.follower24.de/" target="_blank" rel="noopener noreferrer">
26+
<a
27+
href="https://www.follower24.de/"
28+
target="_blank"
29+
rel="noopener noreferrer"
30+
>
2731
<img
2832
className={styles.twicsy}
2933
src="/images/follower24.png"

‎src/content/docs/createFormControl.mdx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,12 @@ This function create the entire form state subscription and allow you to subscri
1818

1919
---
2020

21-
| Name | Type | Description |
22-
| ------------- | ------------------------------ | -------------------------------------------------------------- |
23-
| `formControl` | <TypeText>Object</TypeText> | control object for `useForm` hook |
24-
| `control` | <TypeText>Object</TypeText> | control object for `useController`, `useFormState`, `useWatch` |
25-
| `...returns` | <TypeText>Functions</TypeText> | `useForm` return methods |
21+
| Name | Type | Description |
22+
| ------------- | ------------------------------ | ------------------------------------------------------------------------------------- |
23+
| `formControl` | <TypeText>Object</TypeText> | control object for `useForm` hook |
24+
| `control` | <TypeText>Object</TypeText> | control object for `useController`, `useFormState`, `useWatch` |
25+
| `subscribe` | <TypeText>Function</TypeText> | function to [subscribe](/docs/useform/subscribe) for form state update without render |
26+
| `...returns` | <TypeText>Functions</TypeText> | `useForm` return methods |
2627

2728
<Admonition type="important" title="Notes">
2829
- This function is published at **v7.55.0** - This function is completely

‎src/content/docs/formprovider.mdx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,6 @@ This following table applied to `FormProvider`, `useFormContext` accepts no argu
2727
---
2828

2929
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi"
30-
import React from "react"
31-
3230
import { useForm, FormProvider, useFormContext } from "react-hook-form"
3331

3432
export default function App() {

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,6 @@ function App() {
9696
```
9797

9898
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5"
99-
import React from "react"
10099
import ReactDatePicker from "react-datepicker"
101100
import { TextField } from "@material-ui/core"
102101
import { useForm, Controller } from "react-hook-form"

‎src/content/docs/useform.mdx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -442,7 +442,6 @@ npm install @hookform/resolvers
442442
<TabGroup buttonLabels={["Yup","Zod","Joi","Ajv","Vest", "Custom"]}>
443443

444444
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-apply-validation-ts-forked-nmbyh"
445-
import React from "react"
446445
import { useForm } from "react-hook-form"
447446
import { yupResolver } from "@hookform/resolvers/yup"
448447
import * as yup from "yup"
@@ -507,7 +506,6 @@ const App = () => {
507506
```
508507

509508
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-joiresolver-v6-ts-forked-5pseh"
510-
import React from "react";
511509
import { useForm } from "react-hook-form";
512510
import { joiResolver } from "@hookform/resolvers/joi";
513511
import Joi from "joi";

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ This object contains methods for registering components into React Hook Form.
2121
<TabGroup buttonLabels={["TS", "JS"]}>
2222

2323
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
24-
import React from "react"
2524
import { useForm, Controller } from "react-hook-form"
2625
import { TextField } from "@material-ui/core"
2726

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ The example below shows what to expect when you invoke `getValues` method.
5050
<TabGroup buttonLabels={["TS", "JS", "Types"]}>
5151

5252
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg"
53-
import React from "react"
5453
import { useForm } from "react-hook-form"
5554

5655
type FormInputs = {

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ This function will receive the form data if form validation is successful.
5555
<TabGroup buttonLabels={["TS", "JS"]}>
5656

5757
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-lcrtu"
58-
import React from "react"
5958
import { useForm, SubmitHandler, SubmitErrorHandler } from "react-hook-form"
6059

6160
type FormValues = {
@@ -104,7 +103,6 @@ export default function App() {
104103
**Async**
105104

106105
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-async-submit-validation-kpx0o"
107-
import React from "react";
108106
import { useForm } from "react-hook-form";
109107

110108
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,6 @@ export default function App() {
156156
<TabGroup buttonLabels={["TS", "JS"]}>
157157

158158
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
159-
import React from "react"
160159
import { useForm, Controller } from "react-hook-form"
161160
import { TextField } from "@material-ui/core"
162161

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
title: subscribe
3+
description: Subscribe to form state update without render
4+
sidebar: apiLinks
5+
---
6+
7+
## `subscribe:` <TypeText>`UseFromSubscribe<TFieldValues extends FieldValues>`</TypeText>
8+
9+
Subscribe to [`formState`](/docs/useform/formState) changes and value updates. You can subscribe to individual fields or the entire form, while avoiding unnecessary re-renders caused by form changes.
10+
11+
### Props
12+
13+
---
14+
15+
| Name | Type | Description | Example |
16+
| --------- | --------------------------------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
17+
| name | <TypeText>undefined</TypeText> | Subscribe to the entire form | `subscribe()` |
18+
| | <TypeText>string</TypeText> | Subscribe on a specific field value by **name** | `subscribe({ name: 'test' })` |
19+
| | <TypeText>string[]</TypeText> | Subscribe on multiple fields by **name**. | `subscribe(['firstName', 'lastName'])` |
20+
| formState | <TypeText>`Partial<ReadFormState>`</TypeText> | Pick which [`formState`](/docs/useform/formState) to be subscribed. | <CodeArea withOutCopy rawData={`subscribe({ \n formState: { \n values: true, \n isDirty: true, \n dirtyFields: true, \n touchedFields: true, \n isValid: true, \n errors: true, \n defaultValues: true, \n isSubmitted: true \n } \n})`}/> |
21+
| callback | <TypeText>`Function`</TypeText> | The callback function for the subscription. | <CodeArea withOutCopy rawData={`subscribe({ \n formState: { \n values: true \n }, \n callback: ({ values }) => { \n console.log(values) \n } \n})`}/> |
22+
| exact | <TypeText>boolean</TypeText> | This prop will enable an exact match for input name subscriptions. | `subscribe({ name: 'target', exact: true })` |
23+
24+
<Admonition type="important" title="Notes">
25+
26+
<ul>
27+
<li>
28+
<p>
29+
This function shares the same functionality as{" "}
30+
<code>createFormControl.subscribe</code>, with the key difference being
31+
that [createFormControl](/docs/createFormControl) can be initialized
32+
outside of a React component.
33+
</p>
34+
</li>
35+
<li>
36+
<p>
37+
This function is dedicated for subscribe form state without **render**,
38+
use this function for that instead of [watch](/docs/useform/watch)
39+
callback function.
40+
</p>
41+
</li>
42+
</ul>
43+
44+
</Admonition>
45+
46+
**Examples:**
47+
48+
---
49+
50+
```typescript copy
51+
import { useForm } from "react-hook-form"
52+
53+
type FormInputs = {
54+
firstName: string
55+
lastName: string
56+
}
57+
58+
export default function App() {
59+
const { register, subscribe } = useForm<FormInputs>()
60+
61+
useEffect(() => {
62+
// make sure to unsubscribe;
63+
const callback = subscribe({
64+
callback: ({ values }) => {
65+
console.log(values);
66+
}
67+
})
68+
69+
return () => callback();
70+
71+
// You can also just return the subscribe
72+
// return subscribe();
73+
}, [subscribe])
74+
75+
return (
76+
<form>
77+
<input {...register("firstName", { required: true })} />
78+
<input {...register("lastName", { required: true })} />
79+
</form>
80+
)
81+
}
82+
```

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ Isolate render optimisation only applicable for targeting a single field name wi
3232
<TabGroup buttonLabels={["TS", "JS"]} >
3333

3434
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-ts-triggervalidation-forked-xs7hl"
35-
import React from "react"
3635
import { useForm } from "react-hook-form"
3736

3837
type FormInputs = {
@@ -81,7 +80,6 @@ export default function App() {
8180
```
8281

8382
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-triggervalidation-forked-8w9tn"
84-
import React from "react"
8583
import { useForm } from "react-hook-form"
8684

8785
export default function App() {

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,6 @@ useEffect(() => {
115115
<TabGroup buttonLabels={["TS", "JS"]}>
116116

117117
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d"
118-
import React from "react"
119118
import { useForm } from "react-hook-form"
120119

121120
interface IFormInputs {
@@ -162,7 +161,6 @@ function App() {
162161
```
163162

164163
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-watch-v7-qbxd7"
165-
import React from "react"
166164
import { useForm } from "react-hook-form"
167165

168166
function App() {

‎src/content/docs/useformcontext.mdx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ const methods = useFormContext() // retrieve those props
3939
**Example:**
4040

4141
```javascript copy codesandbox="https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi"
42-
import React from "react"
4342
import { useForm, FormProvider, useFormContext } from "react-hook-form"
4443

4544
export default function App() {

‎src/content/docs/useformstate/errormessage.mdx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ npm install @hookform/error-message
3333
<TabGroup buttonLabels={["TS", "JS"]} >
3434

3535
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-errormessage-d1ues"
36-
import React from "react"
3736
import { useForm } from "react-hook-form"
3837
import { ErrorMessage } from "@hookform/error-message"
3938

@@ -69,7 +68,6 @@ export default function App() {
6968
```
7069

7170
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-errormessage-jufsl"
72-
import React from "react"
7371
import { useForm } from "react-hook-form"
7472
import { ErrorMessage } from "@hookform/error-message"
7573

@@ -107,7 +105,6 @@ export default function App() {
107105
<TabGroup buttonLabels={["TS", "JS"]}>
108106

109107
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-ts-errormessage-multiple-error-messages-forked-sy5f0"
110-
import React from "react"
111108
import { useForm } from "react-hook-form"
112109
import { ErrorMessage } from "@hookform/error-message"
113110

‎src/content/docs/usewatch.mdx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,6 @@ Behaves similarly to the `watch` API, however, this will isolate re-rendering at
7070
<TabGroup buttonLabels={["TS", "JS"]} >
7171

7272
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e"
73-
import React from "react"
7473
import { useForm, useWatch } from "react-hook-form"
7574

7675
interface FormInputs {
@@ -109,7 +108,6 @@ function App() {
109108
```
110109

111110
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-usewatch-forked-9872t"
112-
import React from "react"
113111
import { useForm, useWatch } from "react-hook-form"
114112

115113
function Child({ control }) {
@@ -142,7 +140,6 @@ function App() {
142140
**Advanced Field Array**
143141

144142
```javascript copy sandbox="https://codesandbox.io/s/watchusewatch-calc-4tpnh"
145-
import React from "react"
146143
import { useWatch } from "react-hook-form"
147144

148145
function totalCal(results) {

‎src/content/faqs.mdx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ React Hook Form is based on Uncontrolled Components, which gives you the ability
1616
_(For more information about Uncontrolled Components, read [Sharing State Between Components](https://react.dev/learn/sharing-state-between-components))_
1717

1818
```javascript copy
19-
import React from "react"
2019
import { useForm } from "react-hook-form"
2120

2221
export default function App() {
@@ -278,7 +277,6 @@ First of all, all libs try to solve the same problem: make the form building exp
278277
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 `key` prop to your input. You can also read more about the key props from [this article written by Kent C. Dodds](https://kentcdodds.com/blog/understanding-reacts-key-prop).
279278

280279
```javascript sandbox="https://codesandbox.io/s/react-hook-form-faq-toggle-fields-3htr6" copy
281-
import React from "react"
282280
import { useForm } from "react-hook-form"
283281

284282
export default function App() {

‎src/content/ts.mdx

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ sidebar: tsLinks
99
## \</> Resolver {#Resolver}
1010

1111
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-resolver-forked-mjsx7"
12-
import React from "react"
1312
import { useForm, Resolver } from "react-hook-form"
1413

1514
type FormValues = {
@@ -57,7 +56,6 @@ export default function App() {
5756
## \</> SubmitHandler {#SubmitHandler}
5857

5958
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-z9z0g"
60-
import React from "react"
6159
import { useForm, SubmitHandler } from "react-hook-form"
6260

6361
type FormValues = {
@@ -87,7 +85,6 @@ export default function App() {
8785
## \</> SubmitErrorHandler {#SubmitErrorHandler}
8886

8987
```typescript copy
90-
import React from "react"
9188
import { useForm, SubmitHandler, SubmitErrorHandler } from "react-hook-form"
9289

9390
type FormValues = {
@@ -183,7 +180,6 @@ export type UseFormReturn<
183180
184181
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-UseFormReturn-forked-yl40u"
185182
import type { FieldValues, UseFormReturn, SubmitHandler } from "react-hook-form"
186-
import React from "react"
187183
import { useForm } from "react-hook-form"
188184

189185
type InputProps = React.DetailedHTMLProps<
@@ -549,7 +545,6 @@ export type FormStateProxy<TFieldValues extends FieldValues = FieldValues> = {
549545
<TabGroup buttonLabels={["Code Example", "Type"]}>
550546
551547
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-nestedvalue-lskdv"
552-
import React from "react"
553548
import { useForm, NestedValue } from "react-hook-form"
554549
import { Autocomplete, TextField, Select } from "@material-ui/core"
555550
import { Autocomplete } from "@material-ui/lab"

0 commit comments

Comments
 (0)