How to create a reusable custom Input component with typesafe name prop?

[thebishalniroula]

I have been trying to create a custom reusable Input component that accepts a name prop from the parent.

I want to initialize the useForm from the parent component and define all the validation schema in the parent itself.

Now, how do I type the name prop in the Input component such that it somehow infers the type of name from the parent component.

I have managed to achieve this by passing an unused type prop as below, it provides autocomplete to name prop and is typesafe. But this just does not feel right.

type InputFieldProps = Omit<JSX.IntrinsicElements['input'], 'ref'> & {
  valueAsNumber?: boolean
}

const InputField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>(
  props: {
    types: TFieldValues
    name: TName
  } & InputFieldProps,
) => {
  const { register } = useFormContext<TFieldValues>()
  return (
    <Input
      {...register(props.name, { valueAsNumber: props.valueAsNumber })}
      {...props}
    />
  )
}

And from the parent

const userSchema = z.object({
  email: z.string().email(),
  password: z.string().min(6),
})

type FormFields = z.infer<typeof userSchema>

const LoginAccount = () => {
  const method = useForm<FormFields>({
    resolver: zodResolver(userSchema),
  })
  return (
    <FormProvider {...method}>
      <form onSubmit={method.handleSubmit((data) => console.log(data))}>
        <InputField
          types={{} as FormFields}
          name={'email'}
          placeholder="Email address"
          className="rounded-[0.6rem] font-medium"
        />
        <InputField
          types={types}
          name={'password'}
          placeholder="Password"
          className="rounded-[0.6rem] font-medium"
        />
      </form>
    </FormProvider>
  )
}

Note: Importing the Form Schema Type from the parent is not an option because I want the component to be reusable accross multiple forms.

Thanks in advance.

[brianbattenfeld]

I just opened a similar discussion before seeing this. I'm in the exact same position at the moment. Following.

[acharlop]

I've struggled with this in the past and just had to solve it again so hopefully writing it down I will now remember it.

In general you have to pass in form.control in order for the type safety to apply, otherwise the component has no way of knowing what names are valid.

type PropsWithName<TFieldValues extends FieldValues = FieldValues> =
    UseControllerProps<TFieldValues> &
    InputFieldOrOtherProps &
    {
        name: Path<TFieldValues>
    }

const InputField = <T extends FieldValues = FieldValues>({ name, ..rest }: PropsWithName<T>) => {
    const {field} = useController({name})
    
    return (<>component implementation</>
}

// Usage

const form = useForm<FormFields>({
    resolver: zodResolver(userSchema),
  })
  return (
    <FormProvider {...method}>
      <form onSubmit={method.handleSubmit((data) => console.log(data))}>
        <InputField
          control={form.control}
          name={'email'}
          placeholder="Email address"
          className="rounded-[0.6rem] font-medium"
        />
        <InputField
          control={form.control}
          name={'password'}
          placeholder="Password"
          className="rounded-[0.6rem] font-medium"
        />
      </form>
    </FormProvider>
  )
}