#Generic Form Components

17 messages · Page 1 of 1 (latest)

supple burrow
#

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 #form message

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 {
  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 ...

#

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.

west shoal
#

We define the form Type by inferring a Zod schema

image.png
#

And then in useForm

image.png
#

Which allows us to pass it

image.png
#

and catch it

image.png
supple burrow
#

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!!

west shoal
#

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

supple burrow
west shoal
#

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

supple burrow
#

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

wise echo
wise echo
west shoal
#

@wise echo I have passed it down 2 levels yes, but not needed or tried 3.

west shoal
# wise echo how are you handling the zod schemas mate?

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.

wise echo