Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions origin-src/components/Menu/MenuLinks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,10 @@ export const apiLinks: Pages = [
pathname: "/docs/useformstate/errormessage",
name: "ErrorMessage",
},
{
pathname: "/docs/useformstate/formstatesubscribe",
name: "FormStateSubscribe",
},
],
},
{
Expand Down
1 change: 1 addition & 0 deletions origin-src/content/docs/usecontroller/controller.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ The following table contains information about the arguments for `Controller`.
| `shouldUnregister` | <TypeText>boolean = false`</TypeText> | | Input will be unregistered after unmount and defaultValues will be removed as well.<br/><br/>**Note:** this prop should be avoided when using with `useFieldArray` as `unregister` function gets called after input unmount/remount and reorder. |
| `disabled` | <TypeText>boolean = false`</TypeText> | | `disabled` prop will be returned from `field` prop. Controlled input will be disabled and its value will be omitted from the submission data. |
| `defaultValue` | <TypeText>unknown</TypeText> | | **Important:** Can not apply `undefined` to `defaultValue` or `defaultValues` at `useForm`. <ul><li>You need to either set `defaultValue` at the field-level or `useForm`'s `defaultValues`. If you used <code>defaultValues</code> at <code>useForm</code>, skip using this prop.</li><li>If your form will invoke `reset` with default values, you will need to provide `useForm` with `defaultValues`.</li><li>Calling `onChange` with `undefined` is not valid. You should use `null` or the empty string as your default/cleared value instead.</li></ul> |
| `exact` | <TypeText>boolean = false</TypeText> | | This prop will enable an exact match for input name subscriptions, default to true. |

### Return

Expand Down
6 changes: 5 additions & 1 deletion origin-src/content/docs/useformstate.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,13 @@ sidebar: apiLinks

<SelectNav
options={[
{
label: "FormStateSubscribe",
value: "/docs/useformstate/formstatesubscribe",
},
{
label: "ErrorMessage",
value: "/docs/errormessage",
value: "/docs/useformstate/errormessage",
},
]}
/>
Expand Down
52 changes: 52 additions & 0 deletions origin-src/content/docs/useformstate/formstatesubscribe.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
---
title: FormStateSubscribe
description: Component to subscribe to form state update
sidebar: apiLinks
---

## \</> `FormStateSubscribe:` <TypeText>Component</TypeText>

A React Hook Form component that provides the same functionality as `uesFormState`, but in component form. Instead of using the hook inside another component, you can use `<FormStateSubscribe />` directly in your JSX to subscribe to and render form state.

### Props

---

| Name | Type | Description |
| ---------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `control` | <TypeText>Object</TypeText> | [`control`](/docs/useform/control) object provided by `useForm`. It's optional if you are using `FormProvider`. |
| `name` | <TypeText>string \| string[] </TypeText> | Provide a single input name, an array of them, or subscribe to all inputs' formState update. |
| `disabled` | <TypeText>boolean = false</TypeText> | Option to disable the subscription. |
| `exact` | <TypeText>boolean = false</TypeText> | This prop will enable an exact match for input name subscriptions. |
| `render` | <TypeText>Function</TypeText> | Subscribes to form state of specified form field(s) and re-renders its child function whenever the form state changes. This allows you to declaratively consume form state in JSX without manually wiring up state. |

**Examples:**

---

```tsx copy sandbox=""
import { useForm, FormStateSubscribe } from "react-hook-form"

const App = () => {
const { register, control } = useForm()

return (
<div>
<form>
<input {...register("foo", { min: 3 })} />
<input {...register("bar")} />
{/* re-render only when form state of `foo` changes */}
<FormStateSubscribe
control={control}
name="foo"
render={({ errors }) => <span>{errors.foo?.message}</span>}
/>
</form>
</div>
)
}
```

```

```
9 changes: 9 additions & 0 deletions origin-src/content/docs/usewatch.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,15 @@ description: React Hook for subscribing to input changes
sidebar: apiLinks
---

<SelectNav
options={[
{
label: "Watch",
value: "/docs/usewatch/watch",
}
]}
/>

## \</> `useWatch:` <TypeText>`({ control?: Control, name?: string, defaultValue?: unknown, disabled?: boolean }) => object`</TypeText>

Behaves similarly to the `watch` API, however, this will isolate re-rendering at the custom hook level and potentially result in better performance for your application.
Expand Down
14 changes: 14 additions & 0 deletions origin-src/data/api.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2843,6 +2843,20 @@ setValue('notRegisteredInput', { test: '1', test2: '2' }); // ✅ sugar syntax t
</ul>
</td>
</tr>
<tr>
<td>
<code>exact</code>
</td>
<td>
<code className={typographyStyles.typeText}>boolean = false</code>
</td>
<td></td>
<td>
<p>
This prop will enable an exact match for input name subscriptions, default to true.
</p>
</td>
</tr>
</tbody>
),
tips: (
Expand Down