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 abc2784

Browse files
update on new api create form control (react-hook-form#1113)
* update on new api create form control * update doc on create form control * package upgrade * update doc * fix format * fix format * fix lint and upgrade deps
1 parent a95fb76 commit abc2784

File tree

8 files changed

+774
-557
lines changed

8 files changed

+774
-557
lines changed

β€Ž.prettierignore

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1-
pnpm-lock.yaml
1+
pnpm-lock.yaml
2+
.cache/
3+
.contentlayer/
4+
.next/

β€Žpackage.json

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,20 @@
88
"@mdx-js/loader": "^2.3.0",
99
"@mdx-js/react": "^2.3.0",
1010
"@next/mdx": "15.1.0",
11-
"class-variance-authority": "^0.6.0",
11+
"class-variance-authority": "^0.6.1",
1212
"clsx": "^1.2.1",
1313
"contentlayer": "^0.3.4",
14-
"little-state-machine": "^4.8.0",
14+
"little-state-machine": "^4.8.1",
1515
"next": "15.1.2",
1616
"next-contentlayer": "^0.3.4",
1717
"next-themes": "^0.2.1",
18-
"prism-react-renderer": "^2.0.5",
18+
"prism-react-renderer": "^2.4.1",
1919
"prismjs": "^1.29.0",
2020
"react": "18.3.1",
2121
"react-dom": "18.3.1",
2222
"react-github-btn": "1.4.0",
2323
"react-hook-form": "7.44.3",
24-
"react-simple-animate": "^3.5.2",
24+
"react-simple-animate": "^3.5.3",
2525
"react-simple-img": "3.0.0",
2626
"react-sortablejs": "1.5.1",
2727
"rehype-mdx-code-props": "^1.0.0",
@@ -35,19 +35,19 @@
3535
"@types/eslint-plugin-jsx-a11y": "6.10.0",
3636
"@types/eslint__eslintrc": "2.1.2",
3737
"@types/node": "20.17.10",
38-
"@types/react": "^18.3.17",
39-
"@types/react-dom": "^18.3.5",
40-
"@types/react-helmet": "^6.1.6",
38+
"@types/react": "18.3.17",
39+
"@types/react-dom": "18.3.5",
40+
"@types/react-helmet": "^6.1.11",
4141
"cross-env": "^7.0.3",
4242
"eslint": "9.17.0",
4343
"eslint-config-next": "15.1.0",
4444
"eslint-plugin-jsx-a11y": "6.10.2",
4545
"eslint-plugin-react": "7.37.2",
4646
"eslint-plugin-react-hooks": "5.1.0",
4747
"husky": "^8.0.3",
48-
"lint-staged": "^13.2.2",
48+
"lint-staged": "^13.3.0",
4949
"prettier": "^3.4.2",
50-
"typescript": "^5.6.3",
50+
"typescript": "^5.7.3",
5151
"typescript-eslint": "8.18.1"
5252
},
5353
"keywords": [

β€Žpnpm-lock.yaml

Lines changed: 642 additions & 521 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: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,10 @@ export const apiLinks: Pages = [
159159
pathname: "/docs/usefieldarray",
160160
name: "useFieldArray",
161161
},
162+
{
163+
pathname: "/docs/createFormControl",
164+
name: "createFormControl",
165+
},
162166
]
163167

164168
export const tsLinks: Pages = [

β€Žsrc/components/Nav.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,9 @@ export default function Nav() {
236236
<span>{nav.advanced}</span>
237237
</Link>
238238
<Link
239-
className={`desktopOnly ${router.asPath == "/faqs" ? "active" : ""}`}
239+
className={`desktopOnly ${
240+
router.asPath == "/faqs" ? "active" : ""
241+
}`}
240242
href="/faqs"
241243
>
242244
<div className={styles.iconWrapper}>

β€Žsrc/components/ResourceList.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@ export default function ResourceList({
3535
const { title, author, description, version } = cur
3636
// case insensitive filter
3737
if (
38-
`${title} ${author ?? ""} ${description ?? ""} ${version ? `v${version}` : ""}`.match(
39-
newRegExp(watch("filterResources"),"i")
40-
)
38+
`${title} ${author ?? ""} ${description ?? ""} ${
39+
version ? `v${version}` : ""
40+
}`.match(newRegExp(watch("filterResources"),"i"))
4141
) {
4242
acc.push(cur)
4343
}
Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
title: createFormControl (BETA)
3+
description: Create form state and ready to be subscribed
4+
sidebar: apiLinks
5+
---
6+
7+
This function create the entire form state subscription and allow you to subscribe update with or without react component.
8+
9+
### Props
10+
11+
---
12+
13+
This following table applied to `FormProvider`, `useFormContext` accepts no argument.
14+
15+
| Name | Type | Description |
16+
| ---------- | --------------------------- | -------------- |
17+
| `...props` | <TypeText>Object</TypeText> | `UseFormProps` |
18+
19+
<Admonition type="important" title="Notes">
20+
- This function is published at **v7.55.0-next.1** - This function is
21+
completely optional, you can consider to use this instead of `useFormContext`
22+
API. - You may find it useful if you would like to subscribe formsState by
23+
skipping react re-render.
24+
</Admonition>
25+
26+
**Examples:**
27+
28+
---
29+
30+
<TabGroup buttonLabels={["Setup", "Subscribe"]}>
31+
32+
```javascript
33+
const { formControl, control } = createFormControl({
34+
mode: 'onChange',
35+
defaultValues: {
36+
firstName: 'Bill'
37+
}
38+
}})
39+
40+
function App() {
41+
const { register, handleSubmit } = useForm({
42+
formControl,
43+
})
44+
45+
return (
46+
<form onSubmit={handleSubmit(data => console.log)}>
47+
<input {...register('name')} />
48+
<FormState />
49+
<Controller />
50+
</form>
51+
);
52+
}
53+
54+
function FormState() {
55+
useFormState({
56+
control // no longer need context api
57+
})
58+
}
59+
60+
function Controller() {
61+
useFormState({
62+
control // no longer need context api
63+
})
64+
}
65+
```
66+
67+
```javascript
68+
const { formControl } = createFormControl(props)
69+
70+
formControl.subscribe({
71+
formState: { isDirty: true },
72+
callback: (formState) => {
73+
if (formState.isDirty) {
74+
// do something here
75+
}
76+
},
77+
})
78+
79+
function App() {
80+
const { register } = useForm({
81+
formControl,
82+
})
83+
84+
return <form />
85+
}
86+
```
87+
88+
</TabGroup>

β€Žsrc/content/docs/useform/setvalue.mdx

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -121,33 +121,32 @@ const App = () => {
121121
**Dependant Fields**
122122

123123
```typescript sandbox="https://codesandbox.io/s/dependant-field-dwin1"
124-
import * as React from "react";
125-
import { useForm } from "react-hook-form";
124+
import * as React from "react"
125+
import { useForm } from "react-hook-form"
126126

127127
type FormValues = {
128-
a: string;
129-
b: string;
130-
c: string;
131-
};
128+
a: string
129+
b: string
130+
c: string
131+
}
132132

133133
export default function App() {
134-
const { watch, register, handleSubmit, setValue, formState } = useForm<
135-
FormValues
136-
>({
137-
defaultValues: {
138-
a: "",
139-
b: "",
140-
c: ""
141-
}
142-
});
143-
const onSubmit = (data: FormValues) => console.log(data);
144-
const [a, b] = watch(["a", "b"]);
134+
const { watch, register, handleSubmit, setValue, formState } =
135+
useForm<FormValues>({
136+
defaultValues: {
137+
a: "",
138+
b: "",
139+
c: "",
140+
},
141+
})
142+
const onSubmit = (data: FormValues) => console.log(data)
143+
const [a, b] = watch(["a", "b"])
145144

146145
React.useEffect(() => {
147146
if (formState.touchedFields.a && formState.touchedFields.b && a && b) {
148-
setValue("c", `${a} ${b}`);
147+
setValue("c", `${a} ${b}`)
149148
}
150-
}, [setValue, a, b, formState]);
149+
}, [setValue, a, b, formState])
151150

152151
return (
153152
<form onSubmit={handleSubmit(onSubmit)}>
@@ -159,14 +158,14 @@ export default function App() {
159158
<button
160159
type="button"
161160
onClick={() => {
162-
setValue("a", "what", { shouldTouch: true });
163-
setValue("b", "ever", { shouldTouch: true });
161+
setValue("a", "what", { shouldTouch: true })
162+
setValue("b", "ever", { shouldTouch: true })
164163
}}
165164
>
166165
trigger value
167166
</button>
168167
</form>
169-
);
168+
)
170169
}
171170
```
172171

0 commit comments

Comments
(0)

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /