From 53cc851f8f9e562a503302952f936c48c22edae5 Mon Sep 17 00:00:00 2001 From: bill Date: Sat, 17 May 2025 13:16:37 +1000 Subject: [PATCH 1/2] feat: useWatch compute prop --- src/content/docs/useform/formstate.mdx | 2 +- src/content/docs/usewatch.mdx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/content/docs/useform/formstate.mdx b/src/content/docs/useform/formstate.mdx index 8dbf7fd3b..4c86f24cf 100644 --- a/src/content/docs/useform/formstate.mdx +++ b/src/content/docs/useform/formstate.mdx @@ -19,7 +19,7 @@ This object contains information about the entire form state. It helps you to ke | Name | Type | Description | | -------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `isDirty` | boolean | Set to `true` after the user modifies any of the inputs. | +| `isDirty` | boolean |

Set to `true` after the user modifies any of the inputs.

| | `dirtyFields` | object | An object with the user-modified fields. Make sure to provide all inputs' `defaultValues` via `useForm`, so the library can compare against the `defaultValues.` | | `touchedFields` | object | An object containing all the inputs the user has interacted with. | | `defaultValues` | object | The value which has been set at [useForm](/docs/useform)'s `defaultValues` or updated `defaultValues` via [reset](/docs/useform/reset) API. | diff --git a/src/content/docs/usewatch.mdx b/src/content/docs/usewatch.mdx index 679102693..9016ba50c 100644 --- a/src/content/docs/usewatch.mdx +++ b/src/content/docs/usewatch.mdx @@ -16,6 +16,7 @@ Behaves similarly to the `watch` API, however, this will isolate re-rendering at | -------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | `name` | string \| string[] \| undefined | Name of the field. | | `control` | Object | [`control`](/docs/useform/control) object provided by `useForm`. It's optional if you are using `FormProvider`. | +| `compute` | function |

Subscribe to selective and computed form values.

| | `defaultValue` | unknown | default value for `useWatch` to return before the initial render.

**Note:** the first render will always return `defaultValue` when it's supplied. | | `disabled` | boolean = false | Option to disable the subscription. | | `exact` | boolean = false | This prop will enable an exact match for input name subscriptions. | From 5a82e292ccf392a89cc2b6302c703c2ecb00cbed Mon Sep 17 00:00:00 2001 From: bill Date: Sat, 17 May 2025 13:19:59 +1000 Subject: [PATCH 2/2] update format --- src/components/sponsorsList.tsx | 6 ++++- src/content/docs/useform/formstate.mdx | 32 +++++++++++++------------- src/content/docs/usewatch.mdx | 16 ++++++------- 3 files changed, 29 insertions(+), 25 deletions(-) diff --git a/src/components/sponsorsList.tsx b/src/components/sponsorsList.tsx index f0f946ad6..7027bbbd5 100644 --- a/src/components/sponsorsList.tsx +++ b/src/components/sponsorsList.tsx @@ -23,7 +23,11 @@ export function SponsorsList() { > route4me - + boolean |

Set to `true` after the user modifies any of the inputs.

  • **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.
  • 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.
  • Do not support custom object, Class or File object.
| -| `dirtyFields` | object | An object with the user-modified fields. Make sure to provide all inputs' `defaultValues` via `useForm`, so the library can compare against the `defaultValues.`
  • **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.
  • 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.
| -| `touchedFields` | object | An object containing all the inputs the user has interacted with. | -| `defaultValues` | object | The value which has been set at [useForm](/docs/useform)'s `defaultValues` or updated `defaultValues` via [reset](/docs/useform/reset) API. | -| `isSubmitted` | boolean | Set to `true` after the form is submitted. Will remain `true` until the `reset` method is invoked. | -| `isSubmitSuccessful` | boolean | Indicate the form was successfully submitted without any runtime error. | -| `isSubmitting` | boolean | `true` if the form is currently being submitted. `false` otherwise. | -| `isLoading` | boolean | `true` if the form is currently loading async default values.
  • **Important:** this prop is only applicable to async `defaultValues` await fetch('/api')\n})`}/>
| -| `submitCount` | number | Number of times the form was submitted. | -| `isValid` | boolean | Set to `true` if the form doesn't have any errors.
  • `setError` has no effect on `isValid` `formState`, `isValid` will always derived via the entire form validation result.
| -| `isValidating` | boolean | Set to `true` during validation. | -| `validatingFields` | object | Capture fields which are getting async validation. | -| `errors` | object | An object with field errors. There is also an [ErrorMessage](/docs/useformstate/errormessage) component to retrieve error message easily. | -| `disabled` | boolean | Set to true if the form is disabled via the disabled prop in [useForm](/docs/useform). | -| `isReady` | boolean | Set to true when `formState` subscription setup is ready. isReady && setValue('test', 'data'), [isReady])`}/> | +| `dirtyFields` | object | An object with the user-modified fields. Make sure to provide all inputs' `defaultValues` via `useForm`, so the library can compare against the `defaultValues.`
  • **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.
  • 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.
| +| `touchedFields` | object | An object containing all the inputs the user has interacted with. | +| `defaultValues` | object | The value which has been set at [useForm](/docs/useform)'s `defaultValues` or updated `defaultValues` via [reset](/docs/useform/reset) API. | +| `isSubmitted` | boolean | Set to `true` after the form is submitted. Will remain `true` until the `reset` method is invoked. | +| `isSubmitSuccessful` | boolean | Indicate the form was successfully submitted without any runtime error. | +| `isSubmitting` | boolean | `true` if the form is currently being submitted. `false` otherwise. | +| `isLoading` | boolean | `true` if the form is currently loading async default values.
  • **Important:** this prop is only applicable to async `defaultValues` await fetch('/api')\n})`}/>
| +| `submitCount` | number | Number of times the form was submitted. | +| `isValid` | boolean | Set to `true` if the form doesn't have any errors.
  • `setError` has no effect on `isValid` `formState`, `isValid` will always derived via the entire form validation result.
| +| `isValidating` | boolean | Set to `true` during validation. | +| `validatingFields` | object | Capture fields which are getting async validation. | +| `errors` | object | An object with field errors. There is also an [ErrorMessage](/docs/useformstate/errormessage) component to retrieve error message easily. | +| `disabled` | boolean | Set to true if the form is disabled via the disabled prop in [useForm](/docs/useform). | +| `isReady` | boolean | Set to true when `formState` subscription setup is ready. isReady && setValue('test', 'data'), [isReady])`}/> | diff --git a/src/content/docs/usewatch.mdx b/src/content/docs/usewatch.mdx index 9016ba50c..d613afc9c 100644 --- a/src/content/docs/usewatch.mdx +++ b/src/content/docs/usewatch.mdx @@ -12,14 +12,14 @@ Behaves similarly to the `watch` API, however, this will isolate re-rendering at --- -| Name | Type | Description | -| -------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `name` | string \| string[] \| undefined | Name of the field. | -| `control` | Object | [`control`](/docs/useform/control) object provided by `useForm`. It's optional if you are using `FormProvider`. | -| `compute` | function |

Subscribe to selective and computed form values.

  • Subscribe to the entire form but only return updated value with certain condition { \n if (data.test?.length) return data.test; \n\n return ''; \n }, \n});`}/>
  • Subscribe to a specific form value state { \n return data.length ? data : ''; \n }, \n});`}/>
| -| `defaultValue` | unknown | default value for `useWatch` to return before the initial render.

**Note:** the first render will always return `defaultValue` when it's supplied. | -| `disabled` | boolean = false | Option to disable the subscription. | -| `exact` | boolean = false | This prop will enable an exact match for input name subscriptions. | +| Name | Type | Description | +| -------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `name` | string \| string[] \| undefined | Name of the field. | +| `control` | Object | [`control`](/docs/useform/control) object provided by `useForm`. It's optional if you are using `FormProvider`. | +| `compute` | function |

Subscribe to selective and computed form values.

  • Subscribe to the entire form but only return updated value with certain condition { \n if (data.test?.length) return data.test; \n\n return ''; \n }, \n});`}/>
  • Subscribe to a specific form value state { \n return data.length ? data : ''; \n }, \n});`}/>
| +| `defaultValue` | unknown | default value for `useWatch` to return before the initial render.

**Note:** the first render will always return `defaultValue` when it's supplied. | +| `disabled` | boolean = false | Option to disable the subscription. | +| `exact` | boolean = false | This prop will enable an exact match for input name subscriptions. | ### Return