diff --git a/src/components/ResourceList.tsx b/src/components/ResourceList.tsx
index a7a1e77c1..c95df04f1 100644
--- a/src/components/ResourceList.tsx
+++ b/src/components/ResourceList.tsx
@@ -35,9 +35,9 @@ export default function ResourceList({
const { title, author, description, version } = cur
// case insensitive filter
if (
- `${title} ${author ?? ""} ${description ?? ""} ${version ? `v${version}` : ""}`.match(
- new RegExp(watch("filterResources"), "i")
- )
+ `${title} ${author ?? ""} ${description ?? ""} ${
+ version ? `v${version}` : ""
+ }`.match(new RegExp(watch("filterResources"), "i"))
) {
acc.push(cur)
}
diff --git a/src/content/docs/createFormControl.mdx b/src/content/docs/createFormControl.mdx
new file mode 100644
index 000000000..b3876ab36
--- /dev/null
+++ b/src/content/docs/createFormControl.mdx
@@ -0,0 +1,88 @@
+---
+title: createFormControl (BETA)
+description: Create form state and ready to be subscribed
+sidebar: apiLinks
+---
+
+This function create the entire form state subscription and allow you to subscribe update with or without react component.
+
+### Props
+
+---
+
+This following table applied to `FormProvider`, `useFormContext` accepts no argument.
+
+| Name | Type | Description |
+| ---------- | --------------------------- | -------------- |
+| `...props` |
Object | `UseFormProps` |
+
+
+ - This function is published at **v7.55.0-next.1** - This function is
+ completely optional, you can consider to use this instead of `useFormContext`
+ API. - You may find it useful if you would like to subscribe formsState by
+ skipping react re-render.
+
+
+**Examples:**
+
+---
+
+
+
+```javascript
+const { formControl, control } = createFormControl({
+ mode: 'onChange',
+ defaultValues: {
+ firstName: 'Bill'
+ }
+}})
+
+function App() {
+ const { register, handleSubmit } = useForm({
+ formControl,
+ })
+
+ return (
+
+ );
+}
+
+function FormState() {
+ useFormState({
+ control // no longer need context api
+ })
+}
+
+function Controller() {
+ useFormState({
+ control // no longer need context api
+ })
+}
+```
+
+```javascript
+const { formControl } = createFormControl(props)
+
+formControl.subscribe({
+ formState: { isDirty: true },
+ callback: (formState) => {
+ if (formState.isDirty) {
+ // do something here
+ }
+ },
+})
+
+function App() {
+ const { register } = useForm({
+ formControl,
+ })
+
+ return
+}
+```
+
+
diff --git a/src/content/docs/useform/setvalue.mdx b/src/content/docs/useform/setvalue.mdx
index 98dad9164..055d8af9c 100644
--- a/src/content/docs/useform/setvalue.mdx
+++ b/src/content/docs/useform/setvalue.mdx
@@ -121,33 +121,32 @@ const App = () => {
**Dependant Fields**
```typescript sandbox="https://codesandbox.io/s/dependant-field-dwin1"
-import * as React from "react";
-import { useForm } from "react-hook-form";
+import * as React from "react"
+import { useForm } from "react-hook-form"
type FormValues = {
- a: string;
- b: string;
- c: string;
-};
+ a: string
+ b: string
+ c: string
+}
export default function App() {
- const { watch, register, handleSubmit, setValue, formState } = useForm<
- FormValues
- >({
- defaultValues: {
- a: "",
- b: "",
- c: ""
- }
- });
- const onSubmit = (data: FormValues) => console.log(data);
- const [a, b] = watch(["a", "b"]);
+ const { watch, register, handleSubmit, setValue, formState } =
+ useForm
({
+ defaultValues: {
+ a: "",
+ b: "",
+ c: "",
+ },
+ })
+ const onSubmit = (data: FormValues) => console.log(data)
+ const [a, b] = watch(["a", "b"])
React.useEffect(() => {
if (formState.touchedFields.a && formState.touchedFields.b && a && b) {
- setValue("c", `${a} ${b}`);
+ setValue("c", `${a} ${b}`)
}
- }, [setValue, a, b, formState]);
+ }, [setValue, a, b, formState])
return (
- );
+ )
}
```