mirror of
https://github.com/LukeHagar/form.git
synced 2025-12-09 12:27:44 +00:00
fix: refactor to flat generics with consistent names & patterns
This commit is contained in:
@@ -3,18 +3,23 @@ id: field
|
||||
title: Field
|
||||
---
|
||||
|
||||
### `FieldComponent<TFormData>`
|
||||
### `FieldComponent<TParentData>`
|
||||
|
||||
A type alias representing a field component for a specific form data type.
|
||||
|
||||
```tsx
|
||||
export type FieldComponent = <TField extends DeepKeys<TFormData>>({
|
||||
export type FieldComponent = <TField extends DeepKeys<TParentData>>({
|
||||
children,
|
||||
...fieldOptions
|
||||
}: {
|
||||
children: (fieldApi: FieldApi<DeepValue<TFormData, TField>, TFormData>) => any
|
||||
children: (
|
||||
fieldApi: FieldApi<DeepValue<TParentData, TField>, TParentData>,
|
||||
) => any
|
||||
name: TField
|
||||
} & Omit<FieldOptions<DeepValue<TFormData, TField>, TFormData>, 'name'>) => any
|
||||
} & Omit<
|
||||
FieldOptions<DeepValue<TParentData, TField>, TParentData>,
|
||||
'name'
|
||||
>) => any
|
||||
```
|
||||
|
||||
A function component that takes field options and a render function as children and returns a React component.
|
||||
@@ -22,23 +27,23 @@ A function component that takes field options and a render function as children
|
||||
### `Field`
|
||||
|
||||
```tsx
|
||||
export function Field<TData, TFormData>({
|
||||
export function Field<TData, TParentData>({
|
||||
children,
|
||||
...fieldOptions
|
||||
}: { children: (fieldApi: FieldApi<TData, TFormData>) => any } & FieldOptions<
|
||||
}: { children: (fieldApi: FieldApi<TData, TParentData>) => any } & FieldOptions<
|
||||
TData,
|
||||
TFormData
|
||||
TParentData
|
||||
>): any
|
||||
```
|
||||
|
||||
A functional React component that renders a form field.
|
||||
|
||||
- ```tsx
|
||||
children: (fieldApi: FieldApi<TData, TFormData>) => any
|
||||
children: (fieldApi: FieldApi<TData, TParentData>) => any
|
||||
```
|
||||
- A render function that takes a field API instance and returns a React element.
|
||||
- ```tsx
|
||||
fieldOptions: FieldOptions<TData, TFormData>
|
||||
fieldOptions: FieldOptions<TData, TParentData>
|
||||
```
|
||||
- The field options.
|
||||
|
||||
@@ -47,14 +52,14 @@ The `Field` component uses the `useField` hook internally to manage the field in
|
||||
### `createFieldComponent`
|
||||
|
||||
```tsx
|
||||
export function createFieldComponent<TFormData>(
|
||||
formApi: FormApi<TFormData>,
|
||||
): FieldComponent<TFormData>
|
||||
export function createFieldComponent<TParentData>(
|
||||
formApi: FormApi<TParentData>,
|
||||
): FieldComponent<TParentData>
|
||||
```
|
||||
|
||||
A factory function that creates a connected field component for a specific form API instance.
|
||||
|
||||
- ```tsx
|
||||
formApi: FormApi<TFormData>
|
||||
formApi: FormApi<TParentData>
|
||||
```
|
||||
- The form API instance to connect the field component to.
|
||||
|
||||
@@ -3,11 +3,11 @@ id: fieldApi
|
||||
title: Field API
|
||||
---
|
||||
|
||||
### `FieldApi<TData, TFormData>`
|
||||
### `FieldApi<TData, TParentData>`
|
||||
|
||||
When using `@tanstack/react-form`, the [core field API](../../reference/fieldApi) is extended with additional methods for React-specific functionality:
|
||||
|
||||
- ```tsx
|
||||
Field: FieldComponent<TData, TFormData>
|
||||
Field: FieldComponent<TData, TParentData>
|
||||
```
|
||||
- A pre-bound and type-safe sub-field component using this field as a root.
|
||||
|
||||
@@ -3,17 +3,17 @@ id: useField
|
||||
title: useField
|
||||
---
|
||||
|
||||
### `UseField<TFormData>`
|
||||
### `UseField<TParentData>`
|
||||
|
||||
A type representing a hook for using a field in a form with the given form data type.
|
||||
|
||||
```tsx
|
||||
export type UseField = <TField extends DeepKeys<TFormData>>(
|
||||
export type UseField = <TField extends DeepKeys<TParentData>>(
|
||||
opts?: { name: TField } & FieldOptions<
|
||||
DeepValue<TFormData, TField>,
|
||||
TFormData
|
||||
DeepValue<TParentData, TField>,
|
||||
TParentData
|
||||
>,
|
||||
) => FieldApi<DeepValue<TFormData, TField>, TFormData>
|
||||
) => FieldApi<DeepValue<TParentData, TField>, TParentData>
|
||||
```
|
||||
|
||||
- A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.
|
||||
@@ -21,31 +21,31 @@ export type UseField = <TField extends DeepKeys<TFormData>>(
|
||||
### `useField`
|
||||
|
||||
```tsx
|
||||
export function useField<TData, TFormData>(
|
||||
opts: FieldOptions<TData, TFormData>,
|
||||
): FieldApi<TData, TFormData>
|
||||
export function useField<TData, TParentData>(
|
||||
opts: FieldOptions<TData, TParentData>,
|
||||
): FieldApi<TData, TParentData>
|
||||
```
|
||||
|
||||
A hook for managing a field in a form.
|
||||
|
||||
- ```tsx
|
||||
opts: FieldOptions<TData, TFormData>
|
||||
opts: FieldOptions<TData, TParentData>
|
||||
```
|
||||
- An object with field options.
|
||||
|
||||
#### Returns
|
||||
|
||||
- ```tsx
|
||||
FieldApi<TData, TFormData>
|
||||
FieldApi<TData, TParentData>
|
||||
```
|
||||
- The `FieldApi` instance for the specified field.
|
||||
|
||||
### `createUseField`
|
||||
|
||||
```tsx
|
||||
export function createUseField<TFormData>(
|
||||
formApi: FormApi<TFormData>,
|
||||
): UseField<TFormData>
|
||||
export function createUseField<TParentData>(
|
||||
formApi: FormApi<TParentData>,
|
||||
): UseField<TParentData>
|
||||
```
|
||||
|
||||
A function that creates a `UseField` hook bound to the given `formApi`.
|
||||
|
||||
Reference in New Issue
Block a user