Skip to content

Reusable app hooks #1179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 23 commits into from
Mar 1, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
278224d
feat: add ability to create custom form hook for better app-facing DX
crutchcorn Feb 21, 2025
7372bcf
test: add tests for createFormHook
crutchcorn Feb 21, 2025
8edf8f0
feat: add withForm HOC
crutchcorn Feb 21, 2025
b6e0f91
Revert "feat: add withForm HOC"
crutchcorn Feb 21, 2025
b3ed710
chore: fix typings from `main`
crutchcorn Feb 25, 2025
7081a49
Reapply "feat: add withForm HOC"
crutchcorn Feb 25, 2025
b3f07f2
ci: apply automated fixes and generate docs
autofix-ci[bot] Feb 25, 2025
d8e8097
chore: fix CI
crutchcorn Feb 25, 2025
9ed50b7
feat: add form components functionality
crutchcorn Feb 25, 2025
caf586b
ci: apply automated fixes and generate docs
autofix-ci[bot] Feb 25, 2025
b06ac4b
fix: type unions should now work properly (#1180)
crutchcorn Feb 28, 2025
1a7cf39
docs: add initial philosophy doc
crutchcorn Feb 28, 2025
f7a03c9
docs: add initial docs for form composition
crutchcorn Feb 28, 2025
fd63db0
docs: add withForm docs examples
crutchcorn Feb 28, 2025
4f679ff
docs: add form composition page to docs config
crutchcorn Feb 28, 2025
49c09d3
fix: attempt to fix infinite loops with createFormHook
crutchcorn Feb 28, 2025
2a98a3b
ci: apply automated fixes and generate docs
autofix-ci[bot] Feb 28, 2025
beb661c
docs: Apply suggestions from code review
crutchcorn Mar 1, 2025
c65bc40
feat: make minimum TS supported version 5.4, remove NoInfer hack
crutchcorn Mar 1, 2025
dc586d4
chore: fix Sherif TS errors
crutchcorn Mar 1, 2025
c8d0feb
Merge branch 'main' into reusable-app-hook
crutchcorn Mar 1, 2025
50b76df
ci: apply automated fixes and generate docs
autofix-ci[bot] Mar 1, 2025
7d9300e
docs: add Mermaid chart from the GitHub PR
crutchcorn Mar 1, 2025
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
3 changes: 3 additions & 0 deletions docs/assets/react_form_composability.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions docs/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@
"label": "Installation",
"to": "installation"
},
{
"label": "Philosophy",
"to": "philosophy"
},
{
"label": "Comparison",
"to": "comparison"
Expand Down Expand Up @@ -109,6 +113,10 @@
"label": "UI Libraries",
"to": "framework/react/guides/ui-libraries"
},
{
"label": "Form Composition",
"to": "framework/react/guides/form-composition"
},
{
"label": "React Native",
"to": "framework/react/guides/react-native"
Expand Down
30 changes: 15 additions & 15 deletions docs/framework/angular/reference/classes/tanstackfield.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ title: TanStackField

# Class: TanStackField\<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TSubmitMeta\>

Defined in: [tanstack-field.directive.ts:32](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L32)
Defined in: [tanstack-field.directive.ts:31](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L31)

## Type Parameters

Expand Down Expand Up @@ -76,7 +76,7 @@ new TanStackField<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync
api: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TSubmitMeta>;
```

Defined in: [tanstack-field.directive.ts:133](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L133)
Defined in: [tanstack-field.directive.ts:129](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L129)

***

Expand All @@ -86,7 +86,7 @@ Defined in: [tanstack-field.directive.ts:133](https://github.com/TanStack/form/b
optional asyncAlways: boolean;
```

Defined in: [tanstack-field.directive.ts:82](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L82)
Defined in: [tanstack-field.directive.ts:78](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L78)

If `true`, always run async validation, even if there are errors emitted during synchronous validation.

Expand All @@ -104,7 +104,7 @@ FieldOptions.asyncAlways
optional asyncDebounceMs: number;
```

Defined in: [tanstack-field.directive.ts:81](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L81)
Defined in: [tanstack-field.directive.ts:77](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L77)

The default time to debounce async validation if there is not a more specific debounce time passed.

Expand All @@ -122,7 +122,7 @@ FieldOptions.asyncDebounceMs
optional defaultMeta: Partial<FieldMeta<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync>>;
```

Defined in: [tanstack-field.directive.ts:110](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L110)
Defined in: [tanstack-field.directive.ts:106](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L106)

An optional object with default metadata for the field.

Expand All @@ -140,7 +140,7 @@ FieldOptions.defaultMeta
optional defaultValue: NoInfer<TData>;
```

Defined in: [tanstack-field.directive.ts:80](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L80)
Defined in: [tanstack-field.directive.ts:76](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L76)

An optional default value for the field.

Expand All @@ -158,7 +158,7 @@ FieldOptions.defaultValue
optional disableErrorFlat: boolean;
```

Defined in: [tanstack-field.directive.ts:131](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L131)
Defined in: [tanstack-field.directive.ts:127](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L127)

Disable the `flat(1)` operation on `field.errors`. This is useful if you want to keep the error structure as is. Not suggested for most use-cases.

Expand All @@ -176,7 +176,7 @@ FieldOptions.disableErrorFlat
optional listeners: NoInfer<FieldListeners<TParentData, TName, TData>>;
```

Defined in: [tanstack-field.directive.ts:109](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L109)
Defined in: [tanstack-field.directive.ts:105](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L105)

A list of listeners which attach to the corresponding events

Expand All @@ -194,7 +194,7 @@ FieldOptions.listeners
name: TName;
```

Defined in: [tanstack-field.directive.ts:76](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L76)
Defined in: [tanstack-field.directive.ts:75](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L75)

The field name. The type will be `DeepKeys<TParentData>` to ensure your name is a deep key of the parent dataset.

Expand All @@ -212,7 +212,7 @@ FieldOptions.name
tanstackField: FormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TSubmitMeta>;
```

Defined in: [tanstack-field.directive.ts:83](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L83)
Defined in: [tanstack-field.directive.ts:79](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L79)

***

Expand All @@ -222,7 +222,7 @@ Defined in: [tanstack-field.directive.ts:83](https://github.com/TanStack/form/bl
optional unmount: () => void;
```

Defined in: [tanstack-field.directive.ts:189](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L189)
Defined in: [tanstack-field.directive.ts:185](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L185)

#### Returns

Expand All @@ -236,7 +236,7 @@ Defined in: [tanstack-field.directive.ts:189](https://github.com/TanStack/form/b
optional validators: NoInfer<FieldValidators<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync>>;
```

Defined in: [tanstack-field.directive.ts:95](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L95)
Defined in: [tanstack-field.directive.ts:91](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L91)

A list of validators to pass to the field

Expand All @@ -254,7 +254,7 @@ FieldOptions.validators
ngOnChanges(): void
```

Defined in: [tanstack-field.directive.ts:201](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L201)
Defined in: [tanstack-field.directive.ts:197](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L197)

A callback method that is invoked immediately after the
default change detector has checked data-bound properties
Expand All @@ -279,7 +279,7 @@ OnChanges.ngOnChanges
ngOnDestroy(): void
```

Defined in: [tanstack-field.directive.ts:197](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L197)
Defined in: [tanstack-field.directive.ts:193](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L193)

A callback method that performs custom clean-up, invoked immediately
before a directive, pipe, or service instance is destroyed.
Expand All @@ -302,7 +302,7 @@ OnDestroy.ngOnDestroy
ngOnInit(): void
```

Defined in: [tanstack-field.directive.ts:191](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L191)
Defined in: [tanstack-field.directive.ts:187](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L187)

A callback method that is invoked immediately after the
default change detector has checked the directive's
Expand Down
Loading