generic Input element

i have this generic input element i register with the form, and reduces a whole lot of boilerplate, basically i pass down the field and then setup everything else as is, and is configurable from top down

the issue is that this really is only working for fields that hold string | number values in the form

i have a more complex field that's an array of objects. the field will only track one of the fields, and then i'll have basically a encode decode cycle where

input reads value from form => encode to string => onchange code reads value from input => decode and map onto object

input reads value from form => encode to string => onchange code reads value from input => decode and map onto object

this feels non-trivial to tack onto this generic component, and leads me to wonder if i'm overthinking it and there might be more straightforward way to handle this (without needing to recreate the below in every form field)

type SharedInputFromFieldProps<T extends string | number> = {
  field: ReturnType<typeof useFieldContext<T>>;
  transform?: (value: string) => T;
} & React.ComponentProps<typeof Input>;

export function SharedInputFromField<T extends string | number>(
  props: SharedInputFromFieldProps<T>,
) {
  const { className, field, transform, ...rest } = props;
  return (
    <Input
      autoComplete="off"
      id={field.name}
      name={field.name}
      value={field.state.value}
      onChange={(e) => {
        field.handleChange(
          transform?.(e.target.value) ?? (e.target.value as T),
        );
      }}
      onBlur={field.handleBlur}
      className={cn("hover:bg-secondary/80", className)}
      {...rest}
    />
  );
}

type SharedInputFromFieldProps<T extends string | number> = {
  field: ReturnType<typeof useFieldContext<T>>;
  transform?: (value: string) => T;
} & React.ComponentProps<typeof Input>;

export function SharedInputFromField<T extends string | number>(
  props: SharedInputFromFieldProps<T>,
) {
  const { className, field, transform, ...rest } = props;
  return (
    <Input
      autoComplete="off"
      id={field.name}
      name={field.name}
      value={field.state.value}
      onChange={(e) => {
        field.handleChange(
          transform?.(e.target.value) ?? (e.target.value as T),
        );
      }}
      onBlur={field.handleBlur}
      className={cn("hover:bg-secondary/80", className)}
      {...rest}
    />
  );
}

generic Input element

input reads value from form => encode to string => onchange code reads value from input => decode and map onto object

input reads value from form => encode to string => onchange code reads value from input => decode and map onto object

type SharedInputFromFieldProps<T extends string | number> = {
  field: ReturnType<typeof useFieldContext<T>>;
  transform?: (value: string) => T;
} & React.ComponentProps<typeof Input>;

export function SharedInputFromField<T extends string | number>(
  props: SharedInputFromFieldProps<T>,
) {
  const { className, field, transform, ...rest } = props;
  return (
    <Input
      autoComplete="off"
      id={field.name}
      name={field.name}
      value={field.state.value}
      onChange={(e) => {
        field.handleChange(
          transform?.(e.target.value) ?? (e.target.value as T),
        );
      }}
      onBlur={field.handleBlur}
      className={cn("hover:bg-secondary/80", className)}
      {...rest}
    />
  );
}

type SharedInputFromFieldProps<T extends string | number> = {
  field: ReturnType<typeof useFieldContext<T>>;
  transform?: (value: string) => T;
} & React.ComponentProps<typeof Input>;

export function SharedInputFromField<T extends string | number>(
  props: SharedInputFromFieldProps<T>,
) {
  const { className, field, transform, ...rest } = props;
  return (
    <Input
      autoComplete="off"
      id={field.name}
      name={field.name}
      value={field.state.value}
      onChange={(e) => {
        field.handleChange(
          transform?.(e.target.value) ?? (e.target.value as T),
        );
      }}
      onBlur={field.handleBlur}
      className={cn("hover:bg-secondary/80", className)}
      {...rest}
    />
  );
}

generic Input element

generic Input element

Similar Threads