@tanstack/react-form 0.26.4 → 0.28.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.d.cts +1 -0
- package/dist/cjs/useForm.cjs.map +1 -1
- package/dist/cjs/useForm.d.cts +1 -2
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/useForm.d.ts +1 -2
- package/dist/esm/useForm.js.map +1 -1
- package/package.json +6 -6
- package/src/index.ts +1 -0
- package/src/useForm.tsx +1 -1
package/dist/cjs/index.d.cts
CHANGED
package/dist/cjs/useForm.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, { useState } from 'react'\nimport { Field, type FieldComponent, type UseField, useField } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NodeType } from './types'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\
|
|
1
|
+
{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, { useState } from 'react'\nimport { Field, type FieldComponent, type UseField, useField } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NodeType } from './types'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\nexport interface ReactFormApi<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> {\n /**\n * A React component to render form fields. With this, you can render and manage individual form fields.\n */\n Field: FieldComponent<TFormData, TFormValidator>\n /**\n * A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.\n */\n useField: UseField<TFormData, TFormValidator>\n /**\n * A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state\n */\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => TSelected\n /**\n * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n */\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n /**\n TypeScript versions <=5.0.4 have a bug that prevents\n the type of the `TSelected` generic from being inferred\n from the return type of this method.\n\n In these versions, `TSelected` will fall back to the default\n type (or `unknown` if that's not defined).\n\n @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}\n @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}\n */\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n children: ((state: NoInfer<TSelected>) => NodeType) | NodeType\n }) => NodeType\n}\n\n/**\n * A custom React Hook that returns an extended instance of the `FormApi` class.\n *\n * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields\n */\nexport function useForm<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(opts?: FormOptions<TFormData, TFormValidator>) {\n const [formApi] = useState(() => {\n const api = new FormApi<TFormData, TFormValidator>(opts)\n\n const extendedApi: typeof api & ReactFormApi<TFormData, TFormValidator> =\n api as never\n extendedApi.Field = function APIField(props) {\n return (<Field {...props} form={api} />) as never\n }\n // eslint-disable-next-line react-hooks/rules-of-hooks\n extendedApi.useField = (props) => useField({ ...props, form: api })\n extendedApi.useStore = (selector) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useStore(api.store as any, selector as any) as any\n }\n extendedApi.Subscribe = (props) => {\n return functionalUpdate(\n props.children,\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useStore(api.store as any, props.selector as any),\n ) as any\n }\n\n return extendedApi\n })\n\n useIsomorphicLayoutEffect(formApi.mount, [])\n\n formApi.useStore((state) => state.isSubmitting)\n\n /**\n * formApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n formApi.update(opts)\n })\n\n return formApi\n}\n"],"names":["useState","FormApi","jsx","Field","useField","useStore","functionalUpdate","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;AAuDO,SAAS,QAGd,MAA+C;AAC/C,QAAM,CAAC,OAAO,IAAIA,MAAAA,SAAS,MAAM;AACzB,UAAA,MAAM,IAAIC,iBAAmC,IAAI;AAEvD,UAAM,cACJ;AACU,gBAAA,QAAQ,SAAS,SAAS,OAAO;AAC3C,aAASC,2BAAAA,IAAAC,SAAAA,OAAA,EAAO,GAAG,OAAO,MAAM,IAAK,CAAA;AAAA,IAAA;AAG3B,gBAAA,WAAW,CAAC,UAAUC,SAAA,SAAS,EAAE,GAAG,OAAO,MAAM,IAAA,CAAK;AACtD,gBAAA,WAAW,CAAC,aAAa;AAE5B,aAAAC,oBAAS,IAAI,OAAc,QAAe;AAAA,IAAA;AAEvC,gBAAA,YAAY,CAAC,UAAU;AAC1B,aAAAC,SAAA;AAAA,QACL,MAAM;AAAA;AAAA,QAEND,WAAAA,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAAA;AAAA,IAClD;AAGK,WAAA;AAAA,EAAA,CACR;AAEyBE,4BAAAA,0BAAA,QAAQ,OAAO,CAAA,CAAE;AAE3C,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9CA,4BAAAA,0BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;;"}
|
package/dist/cjs/useForm.d.cts
CHANGED
|
@@ -6,7 +6,7 @@ import { NodeType } from './types.cjs';
|
|
|
6
6
|
/**
|
|
7
7
|
* Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`
|
|
8
8
|
*/
|
|
9
|
-
interface ReactFormApi<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> {
|
|
9
|
+
export interface ReactFormApi<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> {
|
|
10
10
|
/**
|
|
11
11
|
* A React component to render form fields. With this, you can render and manage individual form fields.
|
|
12
12
|
*/
|
|
@@ -44,4 +44,3 @@ interface ReactFormApi<TFormData, TFormValidator extends Validator<TFormData, un
|
|
|
44
44
|
* This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields
|
|
45
45
|
*/
|
|
46
46
|
export declare function useForm<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(opts?: FormOptions<TFormData, TFormValidator>): FormApi<TFormData, TFormValidator> & ReactFormApi<TFormData, TFormValidator>;
|
|
47
|
-
export {};
|
package/dist/esm/index.d.ts
CHANGED
package/dist/esm/useForm.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ import { NodeType } from './types.js';
|
|
|
6
6
|
/**
|
|
7
7
|
* Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`
|
|
8
8
|
*/
|
|
9
|
-
interface ReactFormApi<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> {
|
|
9
|
+
export interface ReactFormApi<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> {
|
|
10
10
|
/**
|
|
11
11
|
* A React component to render form fields. With this, you can render and manage individual form fields.
|
|
12
12
|
*/
|
|
@@ -44,4 +44,3 @@ interface ReactFormApi<TFormData, TFormValidator extends Validator<TFormData, un
|
|
|
44
44
|
* This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields
|
|
45
45
|
*/
|
|
46
46
|
export declare function useForm<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(opts?: FormOptions<TFormData, TFormValidator>): FormApi<TFormData, TFormValidator> & ReactFormApi<TFormData, TFormValidator>;
|
|
47
|
-
export {};
|
package/dist/esm/useForm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, { useState } from 'react'\nimport { Field, type FieldComponent, type UseField, useField } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NodeType } from './types'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\
|
|
1
|
+
{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, { useState } from 'react'\nimport { Field, type FieldComponent, type UseField, useField } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NodeType } from './types'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\nexport interface ReactFormApi<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> {\n /**\n * A React component to render form fields. With this, you can render and manage individual form fields.\n */\n Field: FieldComponent<TFormData, TFormValidator>\n /**\n * A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.\n */\n useField: UseField<TFormData, TFormValidator>\n /**\n * A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state\n */\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => TSelected\n /**\n * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n */\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n /**\n TypeScript versions <=5.0.4 have a bug that prevents\n the type of the `TSelected` generic from being inferred\n from the return type of this method.\n\n In these versions, `TSelected` will fall back to the default\n type (or `unknown` if that's not defined).\n\n @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}\n @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}\n */\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n children: ((state: NoInfer<TSelected>) => NodeType) | NodeType\n }) => NodeType\n}\n\n/**\n * A custom React Hook that returns an extended instance of the `FormApi` class.\n *\n * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields\n */\nexport function useForm<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(opts?: FormOptions<TFormData, TFormValidator>) {\n const [formApi] = useState(() => {\n const api = new FormApi<TFormData, TFormValidator>(opts)\n\n const extendedApi: typeof api & ReactFormApi<TFormData, TFormValidator> =\n api as never\n extendedApi.Field = function APIField(props) {\n return (<Field {...props} form={api} />) as never\n }\n // eslint-disable-next-line react-hooks/rules-of-hooks\n extendedApi.useField = (props) => useField({ ...props, form: api })\n extendedApi.useStore = (selector) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useStore(api.store as any, selector as any) as any\n }\n extendedApi.Subscribe = (props) => {\n return functionalUpdate(\n props.children,\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useStore(api.store as any, props.selector as any),\n ) as any\n }\n\n return extendedApi\n })\n\n useIsomorphicLayoutEffect(formApi.mount, [])\n\n formApi.useStore((state) => state.isSubmitting)\n\n /**\n * formApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n formApi.update(opts)\n })\n\n return formApi\n}\n"],"names":[],"mappings":";;;;;;AAuDO,SAAS,QAGd,MAA+C;AAC/C,QAAM,CAAC,OAAO,IAAI,SAAS,MAAM;AACzB,UAAA,MAAM,IAAI,QAAmC,IAAI;AAEvD,UAAM,cACJ;AACU,gBAAA,QAAQ,SAAS,SAAS,OAAO;AAC3C,aAAS,oBAAA,OAAA,EAAO,GAAG,OAAO,MAAM,IAAK,CAAA;AAAA,IAAA;AAG3B,gBAAA,WAAW,CAAC,UAAU,SAAS,EAAE,GAAG,OAAO,MAAM,IAAA,CAAK;AACtD,gBAAA,WAAW,CAAC,aAAa;AAE5B,aAAA,SAAS,IAAI,OAAc,QAAe;AAAA,IAAA;AAEvC,gBAAA,YAAY,CAAC,UAAU;AAC1B,aAAA;AAAA,QACL,MAAM;AAAA;AAAA,QAEN,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAAA;AAAA,IAClD;AAGK,WAAA;AAAA,EAAA,CACR;AAEyB,4BAAA,QAAQ,OAAO,CAAA,CAAE;AAE3C,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9C,4BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/react-form",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.28.0",
|
|
4
4
|
"description": "Powerful, type-safe forms for React.",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -57,19 +57,19 @@
|
|
|
57
57
|
"src"
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@remix-run/node": "^2.
|
|
61
|
-
"@tanstack/react-store": "^0.5.
|
|
60
|
+
"@remix-run/node": "^2.11.0",
|
|
61
|
+
"@tanstack/react-store": "^0.5.5",
|
|
62
62
|
"decode-formdata": "^0.7.5",
|
|
63
|
-
"@tanstack/form-core": "0.
|
|
63
|
+
"@tanstack/form-core": "0.28.0"
|
|
64
64
|
},
|
|
65
65
|
"devDependencies": {
|
|
66
|
-
"@tanstack/start": "^1.
|
|
66
|
+
"@tanstack/start": "^1.46.4",
|
|
67
67
|
"@types/react": "^18.3.3",
|
|
68
68
|
"@types/react-dom": "^18.3.0",
|
|
69
69
|
"@vitejs/plugin-react": "^4.3.1",
|
|
70
70
|
"react": "^18.3.1",
|
|
71
71
|
"react-dom": "^18.3.1",
|
|
72
|
-
"vite": "^5.3.
|
|
72
|
+
"vite": "^5.3.5"
|
|
73
73
|
},
|
|
74
74
|
"peerDependencies": {
|
|
75
75
|
"@tanstack/start": "^1.43.13",
|
package/src/index.ts
CHANGED
package/src/useForm.tsx
CHANGED
|
@@ -10,7 +10,7 @@ import type { NodeType } from './types'
|
|
|
10
10
|
/**
|
|
11
11
|
* Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`
|
|
12
12
|
*/
|
|
13
|
-
interface ReactFormApi<
|
|
13
|
+
export interface ReactFormApi<
|
|
14
14
|
TFormData,
|
|
15
15
|
TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
|
|
16
16
|
> {
|