Skip to content

Commit 53cc851

Browse files
bluebill1049bluebill1049
committed
feat: useWatch compute prop
1 parent 5590cd3 commit 53cc851

File tree

2 files changed

+2
-1
lines changed

2 files changed

+2
-1
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ This object contains information about the entire form state. It helps you to ke
1919

2020
| Name | Type | Description |
2121
| -------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
22-
| `isDirty` | <TypeText>boolean</TypeText> | Set to `true` after the user modifies any of the inputs.<ul><li>**Important:** make sure to provide all inputs' `defaultValues` at the `useForm`, so hook form can have a single source of truth to compare whether the form is dirty.<CodeArea withOutCopy rawData={`const {\n formState: { isDirty, dirtyFields },\n setValue\n} = useForm({ defaultValues: { test: "" } })\n\n// isDirty: true ✅\nsetValue('test', 'change')\n\n// isDirty: false because there getValues() === defaultValues ❌\nsetValue('test', '')`}/></li><li>File typed input will need to be managed at the app level due to the ability to cancel file selection and [FileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList) object.</li><li>Do not support custom object, Class or File object.</li></ul> |
22+
| `isDirty` | <TypeText>boolean</TypeText> | <p>Set to `true` after the user modifies any of the inputs.</p><ul><li>**Important:** make sure to provide all inputs' `defaultValues` at the `useForm`, so hook form can have a single source of truth to compare whether the form is dirty.<CodeArea withOutCopy rawData={`const {\n formState: { isDirty, dirtyFields },\n setValue\n} = useForm({ defaultValues: { test: "" } })\n\n// isDirty: true ✅\nsetValue('test', 'change')\n\n// isDirty: false because there getValues() === defaultValues ❌\nsetValue('test', '')`}/></li><li>File typed input will need to be managed at the app level due to the ability to cancel file selection and [FileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList) object.</li><li>Do not support custom object, Class or File object.</li></ul> |
2323
| `dirtyFields` | <TypeText>object</TypeText> | An object with the user-modified fields. Make sure to provide all inputs' `defaultValues` via `useForm`, so the library can compare against the `defaultValues.`<ul><li>**Important:** make sure to provide `defaultValues` at the `useForm`, so hook form can have a single source of truth to compare each field's dirtiness.</li><li>Dirty fields will **not** represent as `isDirty` `formState`, because dirty fields are marked field dirty at field level rather the entire form. If you want to determine the entire form state use `isDirty` instead.</li></ul> |
2424
| `touchedFields` | <TypeText>object</TypeText> | An object containing all the inputs the user has interacted with. |
2525
| `defaultValues` | <TypeText>object</TypeText> | The value which has been set at [useForm](/docs/useform)'s `defaultValues` or updated `defaultValues` via [reset](/docs/useform/reset) API. |

‎src/content/docs/usewatch.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ Behaves similarly to the `watch` API, however, this will isolate re-rendering at
1616
| -------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
1717
| `name` | <TypeText>string \| string[] \| undefined</TypeText> | Name of the field. |
1818
| `control` | <TypeText>Object</TypeText> | [`control`](/docs/useform/control) object provided by `useForm`. It's optional if you are using `FormProvider`. |
19+
| `compute` | <TypeText>function</TypeText> | <p>Subscribe to selective and computed form values.</p><ul><li>Subscribe to the entire form but only return updated value with certain condition<CodeArea withOutCopy rawData={`const watchedValue = useWatch({\n compute: (data: FormValue) => { \n if (data.test?.length) return data.test; \n\n return ''; \n }, \n});`}/></li><li>Subscribe to a specific form value state<CodeArea withOutCopy rawData={`const watchedValue = useWatch({\n name: 'test', \n compute: (data: string) => { \n return data.length ? data : ''; \n }, \n});`}/></li></ul>|
1920
| `defaultValue` | <TypeText>unknown</TypeText> | default value for `useWatch` to return before the initial render.<br/><br/>**Note:** the first render will always return `defaultValue` when it's supplied. |
2021
| `disabled` | <TypeText>boolean = false</TypeText> | Option to disable the subscription. |
2122
| `exact` | <TypeText>boolean = false</TypeText> | This prop will enable an exact match for input name subscriptions. |

0 commit comments

Comments
 (0)