Skip to content

Commit 9094f6b

Browse files
ws-rushws-rush
authored
Merge pull request #2 from TanStack/main
Merge Upstream Changes
2 parents effb050 + 1e08fd8 commit 9094f6b

File tree

16 files changed

+909
-120
lines changed

16 files changed

+909
-120
lines changed

‎.changeset/eight-dolls-wash.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@tanstack/react-form-devtools': patch
3+
'@tanstack/solid-form-devtools': patch
4+
'@tanstack/form-devtools': patch
5+
---
6+
7+
Bump devtools utils to latest versions.

‎.changeset/green-tips-do.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@tanstack/react-form-devtools': patch
3+
'@tanstack/solid-form-devtools': patch
4+
---
5+
6+
use explicit paths for the devtools production exports

‎docs/framework/react/guides/ui-libraries.md‎

Lines changed: 60 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ title: UI Libraries
55

66
## Usage of TanStack Form with UI Libraries
77

8-
TanStack Form is a headless library, offering you complete flexibility to style it as you see fit. It's compatible with a wide range of UI libraries, including `Tailwind`, `Material UI`, `Mantine`, `shadcn/ui`, or even plain CSS.
8+
TanStack Form is a headless library, offering you complete flexibility to style it as you see fit. It's compatible with a wide range of UI libraries, including `Chakra UI`, `Tailwind`, `Material UI`, `Mantine`, `shadcn/ui`, or even plain CSS.
99

10-
This guide focuses on `Material UI`, `Mantine`, and `shadcn/ui`, but the concepts are applicable to any UI library of your choice.
10+
This guide focuses on `Chakra UI`, `Material UI`, `Mantine`, and `shadcn/ui`, but the concepts are applicable to any UI library of your choice.
1111

1212
### Prerequisites
1313

1414
Before integrating TanStack Form with a UI library, ensure the necessary dependencies are installed in your project:
1515

16+
- For `Chakra UI`, follow the installation instructions on their [official site](https://chakra-ui.com/docs/get-started/installation)
1617
- For `Material UI`, follow the installation instructions on their [official site](https://mui.com/material-ui/getting-started/).
1718
- For `Mantine`, refer to their [documentation](https://mantine.dev/).
1819
- For `shadcn/ui`, refer to their [official site](https://ui.shadcn.com/).
@@ -153,8 +154,63 @@ The process for integrating shadcn/ui components is similar. Here's an example u
153154
/>
154155
```
155156

156-
- The integration approach is the same as with Mantine and Material UI.
157+
- The integration approach is the same as with Mantine, Material UI.
157158
- The primary difference lies in the specific shadcn/ui component properties and styling options.
158159
- Note the onCheckedChange property of Checkbox instead of onChange.
159160

160-
The ShadCN library includes a dedicated guide covering common scenarios for integrating TanStack Form with its components: https://ui.shadcn.com/docs/forms/tanstack-form
161+
The ShadCN library includes a dedicated guide covering common scenarios for integrating TanStack Form with its components: [https://ui.shadcn.com/docs/forms/tanstack-form](https://ui.shadcn.com/docs/forms/tanstack-form)
162+
163+
### Usage with Chakra UI
164+
165+
The process for integrating Chakra UI components is similar. Here's an example using Input and Checkbox from Chakra UI:
166+
167+
```tsx
168+
<Field
169+
name="name"
170+
children={({ state, handleChange, handleBlur }) => (
171+
<Input
172+
value={state.value}
173+
onChange={(e) => handleChange(e.target.value)}
174+
onBlur={handleBlur}
175+
placeholder="Enter your name"
176+
/>
177+
)}
178+
/>
179+
<Field
180+
name="isChecked"
181+
children={({ state, handleChange, handleBlur }) => (
182+
<Checkbox.Root
183+
checked={state.value}
184+
onCheckedChange={(details) => handleChange(!!details.checked)}
185+
onBlur={handleBlur}
186+
>
187+
<Checkbox.HiddenInput />
188+
<Checkbox.Control />
189+
<Checkbox.Label>Accept terms</Checkbox.Label>
190+
</Checkbox.Root>
191+
)}
192+
/>
193+
```
194+
195+
- The integration approach is the same as with Mantine, Material UI, and shadcn/ui.
196+
- Chakra UI exposes its Checkbox as a composable component with separate `Checkbox.Root`, `Checkbox.Control`, `Checkbox.Label`, and `Checkbox.HiddenInput` parts that you wire together.
197+
- The double negation `!!` is used on `onCheckedChange` to coerce Chakra's `"indeterminate"` state to a boolean, ensuring it matches the form state. See the [Chakra UI Checkbox documentation](https://chakra-ui.com/docs/components/checkbox#indeterminate) for more details.
198+
- Alternatively, Chakra UI offers a pre-composed Checkbox component that works the same way as their standard examples, without requiring manual composition. You can learn more about this closed component approach in the [Chakra UI Checkbox documentation](https://chakra-ui.com/docs/components/checkbox#closed-component).
199+
- The TanStack Form integration works identically with either approach—simply attach the `checked`, `onCheckedChange`, and `onBlur` handlers to your chosen component.
200+
201+
Example using the closed Checkbox component:
202+
203+
```tsx
204+
<Field
205+
name="isChecked"
206+
children={({ state, handleChange, handleBlur }) => (
207+
<Checkbox
208+
checked={state.value}
209+
onCheckedChange={(details) => handleChange(!!details.checked)}
210+
onBlur={handleBlur}
211+
>
212+
Accept terms
213+
</Checkbox>
214+
)}
215+
/>
216+
```

‎docs/installation.md‎

Lines changed: 60 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -3,84 +3,65 @@ id: installation
33
title: Installation
44
---
55

6-
TanStack Form is compatible with various front-end frameworks, including React, Vue, and Solid. To use TanStack Form with your desired framework, install the corresponding adapter via your preferred package manager:
7-
8-
### React Example
9-
10-
```bash
11-
# npm
12-
$ npm i @tanstack/react-form
13-
# pnpm
14-
$ pnpm add @tanstack/react-form
15-
# bun
16-
$ bun add @tanstack/react-form
17-
# yarn
18-
$ yarn add @tanstack/react-form
19-
```
20-
21-
### Vue Example
22-
23-
```bash
24-
# npm
25-
$ npm i @tanstack/vue-form
26-
# pnpm
27-
$ pnpm add @tanstack/vue-form
28-
# bun
29-
$ bun add @tanstack/vue-form
30-
# yarn
31-
$ yarn add @tanstack/vue-form
32-
```
33-
34-
### Angular Example
35-
36-
```bash
37-
# npm
38-
$ npm i @tanstack/angular-form
39-
# pnpm
40-
$ pnpm add @tanstack/angular-form
41-
# bun
42-
$ bun add @tanstack/angular-form
43-
# yarn
44-
$ yarn add @tanstack/angular-form
45-
```
46-
47-
### Solid Example
48-
49-
```bash
50-
# npm
51-
$ npm i @tanstack/solid-form
52-
# pnpm
53-
$ pnpm add @tanstack/solid-form
54-
# bun
55-
$ bun add @tanstack/solid-form
56-
# yarn
57-
$ yarn add @tanstack/solid-form
58-
```
59-
60-
### Lit Example
61-
62-
```bash
63-
# npm
64-
$ npm i @tanstack/lit-form
65-
# pnpm
66-
$ pnpm add @tanstack/lit-form
67-
# bun
68-
$ bun add @tanstack/lit-form
69-
# yarn
70-
$ yarn add @tanstack/lit-form
71-
```
72-
73-
### Svelte Example
74-
75-
```bash
76-
# npm
77-
$ npm i @tanstack/svelte-form
78-
# pnpm
79-
$ pnpm add @tanstack/svelte-form
80-
# bun
81-
$ bun add @tanstack/svelte-form
82-
# yarn
83-
$ yarn add @tanstack/svelte-form
84-
```
6+
TanStack Form is compatible with various front-end frameworks, including React, Vue, and Solid. Install the corresponding adapter for your framework using your preferred package manager:
857

8+
<!-- ::start:tabs variant="package-managers" -->
9+
10+
react: @tanstack/react-form
11+
vue: @tanstack/vue-form
12+
angular: @tanstack/angular-form
13+
solid: @tanstack/solid-form
14+
lit: @tanstack/lit-form
15+
svelte: @tanstack/svelte-form
16+
17+
<!-- ::end:tabs -->
18+
19+
<!-- ::start:framework -->
20+
21+
# React
22+
23+
## Meta-frameworks
24+
25+
If you're using a meta-framework, TanStack Form provides additional adapters to streamline integration:
26+
27+
- TanStack Start
28+
- Next.js
29+
- Remix
30+
31+
<!-- ::end:framework -->
32+
33+
<!-- ::start:tabs variant="package-manager" -->
34+
35+
react: @tanstack/react-form-start
36+
react: @tanstack/react-form-nextjs
37+
react: @tanstack/react-form-remix
38+
39+
<!-- ::end:tabs -->
40+
41+
<!-- ::start:framework -->
42+
43+
# React
44+
45+
## Devtools
46+
47+
Developer tools are available using [TanStack Devtools](https://tanstack.com/devtools/latest). Install the devtools adapter for your framework to debug forms and inspect their state.
48+
49+
# Solid
50+
51+
## Devtools
52+
53+
Developer tools are available using [TanStack Devtools](https://tanstack.com/devtools/latest). Install the devtools adapter for your framework to debug forms and inspect their state.
54+
55+
<!-- ::end:framework -->
56+
57+
<!-- ::start:tabs variant="package-manager" -->
58+
59+
react: @tanstack/react-devtools
60+
react: @tanstack/react-form-devtools
61+
solid: @tanstack/solid-devtools
62+
solid: @tanstack/solid-form-devtools
63+
64+
<!-- ::end:tabs -->
65+
66+
> [!NOTE]- Polyfill requirements
8667
> Depending on your environment, you might need to add polyfills. If you want to support older browsers, you need to transpile the library from `node_modules` yourself.

0 commit comments

Comments
 (0)