reduced-jade

Generic Form Components

I figured Id drag my post from the general channel, over to here as I've hit a wall with the Ts that I'm working on. Here's my code sandbox https://codesandbox.io/p/sandbox/yv7zmh demo, and the original post that i made in general https://discord.com/channels/719702312431386674/1100437019857014895/1318637134667583508 Basically, I wanted to carry on from the discussion on this issue (https://github.com/TanStack/form/discussions/636) to open a PR with some documentation on reusable components. It's something that I'm trying to get working at work but I'm having massive Ts performance hits, and so I think it might be a good time to reach out to someone more familiar with the matter.

import TextField from "@mui/material/TextField";

import {
  DeepKeys,
  ReactFormExtendedApi,
  Validator,
} from "@tanstack/react-form";
import { DeepValue } from "@tanstack/react-form";

type IsDeepValueString<T, K extends DeepKeys<T>> = DeepValue<
  T,
  K
> extends string
  ? K
  : never;
type StringDeepKeys<T> = {
  [P in DeepKeys<T>]: IsDeepValueString<T, P>;
}[DeepKeys<T>];

export default function GenericTextField<
  TFormData,
  TFormValidator extends Validator<TFormData, unknown> | undefined,
  Form extends ReactFormExtendedApi<TFormData, TFormValidator>,
  // Name extends DeepKeys<TFormData>,
  Name extends DeepKeys<TFormData> & StringDeepKeys<Form>
>({
  name,
  label,
  form: { Field },
}: {
  name: Name;
  label?: string;
  form: Form;
}): JSX.Element {
  return (
    <Field name={name}>
      {({ handleChange, handleBlur, state }) => (
        <TextField
          label={label}
          name={String(name)}
          onChange={(e) => {
            handleChange(e.target.value);
          }}
          onBlur={handleBlur}
          value={state.value}
        />
      )}
    </Field>
  );
}

import TextField from "@mui/material/TextField";

import {
  DeepKeys,
  ReactFormExtendedApi,
  Validator,
} from "@tanstack/react-form";
import { DeepValue } from "@tanstack/react-form";

type IsDeepValueString<T, K extends DeepKeys<T>> = DeepValue<
  T,
  K
> extends string
  ? K
  : never;
type StringDeepKeys<T> = {
  [P in DeepKeys<T>]: IsDeepValueString<T, P>;
}[DeepKeys<T>];

export default function GenericTextField<
  TFormData,
  TFormValidator extends Validator<TFormData, unknown> | undefined,
  Form extends ReactFormExtendedApi<TFormData, TFormValidator>,
  // Name extends DeepKeys<TFormData>,
  Name extends DeepKeys<TFormData> & StringDeepKeys<Form>
>({
  name,
  label,
  form: { Field },
}: {
  name: Name;
  label?: string;
  form: Form;
}): JSX.Element {
  return (
    <Field name={name}>
      {({ handleChange, handleBlur, state }) => (
        <TextField
          label={label}
          name={String(name)}
          onChange={(e) => {
            handleChange(e.target.value);
          }}
          onBlur={handleBlur}
          value={state.value}
        />
      )}
    </Field>
  );
}

Any help is massively appreciated, or even a repo to look at for inspiration would be great. Thanks in advance!! 🤟

GitHub

Generics for useForm for custom components for fields · TanStack fo...

Hey! Love tanstack form and recently switched from another library. A question about the correct usage of generics for reuseable fields The code below results in a type error on the name prop. How ...

15 Replies

reduced-jadeOP•9mo ago

Sorry for the formatting, the character count just a little too short. I have two issues, one is the Ts performance as previously mentioned, the second is the inference of the generic slot in App.tsx in the code sand box. Im tying to, unsuccessfully at that, narrow the name prop down to only fields that match the types the generic component accepts.

correct-apricot•9mo ago

We define the form Type by inferring a Zod schema

correct-apricot•9mo ago

And then in useForm

correct-apricot•9mo ago

Which allows us to pass it

correct-apricot•9mo ago

and catch it

reduced-jadeOP•9mo ago

thank man, yeah I can see how that works, for the pr I was looking to do I don't think it'll work though as it requires zod. But the input is welcome!!

correct-apricot•9mo ago

I imagine you could still define a type that contains all the fields and their types. Zod just gives us the type inference.

reduced-jadeOP•9mo ago

Absolutely, that could work, the idea that I had is that it should be inferred from the form prop. Like im trying to do here. But the only version I've got working is version 2 where ReactFormExtendedApi<any, any> is given for the generic and that wont do. Functionally it works, which is cool, but in a situation that the codebase disallows "any" this is a non starter.

correct-apricot•9mo ago

Cool, yeah that's a level deeper than I've gone so far.

reduced-jadeOP•9mo ago

But, as i said the input is really appreciated. Thanks 🤟

fascinating-indigo•9mo ago

how are you handling the zod schemas mate? Another question I got this, that just works for 1 level down? have you tried to do it for 2 levels down? Maybt not 3, but 2 it's a fair use-case

correct-apricot•9mo ago

@El Barto I have passed it down 2 levels yes, but not needed or tried 3. Each form 'section' has its own schema. When a section is added/removed from the form there's a useEffect that sets the base schema and them uses zod merge to add in the additional section schemas that match the form. There is no overlap between the two schemas. I've peeked at discriminated unions but can't wrap my head around how they work and it seems to be for overlapping values mainly? Do you mind responding with an example in my other thread 'Possible to update Zod schema....' from a few days ago? I think it's off track for this thread and I'm totally stuck.

correct-apricot•9mo ago

fascinating-indigo•9mo ago

Sure mate, please drop your other thread here and I'll do it this weekend. I've been working +60 hours this week than my wife won't let me put one single finger on my laptop tomorrow 😅

correct-apricot•9mo ago

https://discord.com/channels/719702312431386674/1319135199958663209

Gaming

Programming

Generic Form Components

Did you find this page helpful?