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 51a861b

Browse files
feat: useWatch compute prop (#1145)
* feat: useWatch compute prop * update format * update lint
1 parent bff10cf commit 51a861b

File tree

3 files changed

+13
-11
lines changed

3 files changed

+13
-11
lines changed

‎src/components/sponsorsList.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export function SponsorsList() {
2121
target="_blank"
2222
rel="noopener noreferrer"
2323
>
24-
<img src="/images/route4me.png" alt="route4me"/>
24+
<img src="/images/route4me.png" alt="route4me"/>
2525
</a>
2626
<a
2727
href="https://www.follower24.de/"

‎src/content/docs/usewatch.mdx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,14 @@ Behaves similarly to the `watch` API, however, this will isolate re-rendering at
1212

1313
---
1414

15-
| Name | Type | Description |
16-
| -------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
17-
| `name` | <TypeText>string \| string[] \| undefined</TypeText> | Name of the field. |
18-
| `control` | <TypeText>Object</TypeText> | [`control`](/docs/useform/control) object provided by `useForm`. It's optional if you are using `FormProvider`. |
19-
| `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. |
20-
| `disabled` | <TypeText>boolean = false</TypeText> | Option to disable the subscription. |
21-
| `exact` | <TypeText>boolean = false</TypeText> | This prop will enable an exact match for input name subscriptions. |
15+
| Name | Type | Description |
16+
| -------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
17+
| `name` | <TypeText>string \| string[] \| undefined</TypeText> | Name of the field. |
18+
| `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> |
20+
| `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. |
21+
| `disabled` | <TypeText>boolean = false</TypeText> | Option to disable the subscription. |
22+
| `exact` | <TypeText>boolean = false</TypeText> | This prop will enable an exact match for input name subscriptions. |
2223

2324
### Return
2425

‎src/content/ts.mdx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,12 +96,13 @@ type FormValues = {
9696
export default function App() {
9797
const { register, handleSubmit } = useForm<FormValues>()
9898
const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data)
99-
const onError: SubmitErrorHandler<FormValues> = (errors) => console.log(errors);
99+
const onError: SubmitErrorHandler<FormValues> = (errors) =>
100+
console.log(errors)
100101

101102
return (
102103
<form onSubmit={handleSubmit(onSubmit, onError)}>
103-
<input {...register("firstName"), { required: true }} />
104-
<input {...register("lastName"), { minLength: 2 }} />
104+
<input {...(register("firstName"), { required: true })} />
105+
<input {...(register("lastName"), { minLength: 2 })} />
105106
<input type="email" {...register("email")} />
106107

107108
<input type="submit" />

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /