T
TanStack•2y ago
evident-indigo

is ReactFormApi interface exported somehwere?

is there a way to import ReactFormApi?
9 Replies
conscious-sapphire
conscious-sapphire•2y ago
Currently not, what is the usecase? 🙂
evident-indigo
evident-indigoOP•2y ago
i was trying to pass the form object as prop I basically made a part of a form in a separate component to keep it clean and short so I wanted to pass the form object to make other form fields and other stuff inside so far I just used an any but it would be nice to have a way to pass it as a prop
conscious-sapphire
conscious-sapphire•2y ago
Ah right, we're working on a way to easily create reusable components, but for now you can pass the form and type it with this: 
form: ReturnType<typeof useForm<TFormData>>
form: ReturnType<typeof useForm<TFormData>>
If TFormData is a generic the fun begins, but if you pass the actual type of your form you also have all the typesafety you need 🙂
evident-indigo
evident-indigoOP•2y ago
thanks!
desirable-aquamarine
desirable-aquamarine•2y ago
Hi! I'd be curious to learn more about the approach you are working on to create reusable components. I've worked on an approach myself and would really appreciate to see what you are working on. Is the approach available somewhere? I'd be happy to share my approach as well.
conscious-sapphire
conscious-sapphire•2y ago
Sure! I'd say we're almost there with the initial implementation, you can find it on this PR. There's also an example of the usage in this file. Feedback is more than welcome! 😄
desirable-aquamarine
desirable-aquamarine•2y ago
Interesting! My approach was actually very similar, in that I used the same TS feature to get the type definition for the name prop right, so that it can only match values which are compatible with the custom component. I tried to opt out of the render prop model though, which probably wasn't the best idea.
conscious-sapphire
conscious-sapphire•2y ago
Did you find a solution to get form.Field correctly typed? Our current state is with that type cast on <form.Field<TName, any, any> ... /> which we don't really like but it seems TS can't go that far
desirable-aquamarine
desirable-aquamarine•2y ago
No I did not attempt to get that part right and just ignored it. It looks like this: 
export type InputGroupFieldProps<FormValues> = InputGroupProps & {
  field: Omit<FieldComponentProps<FormValues>, 'name'> & {
    name: DeepKeysByType<FormValues, string>;
  };
};

export function InputGroupField<FormValues>(
  props: InputGroupFieldProps<FormValues>,
) {
  const { useField } = useForm<FormValues>();
  const { field: fieldConfig, ...otherProps } = props;

  const field = useField(fieldConfig);
  return (
    <InputGroup
      {...otherProps}
      // @ts-expect-error DeepKeysByType ensures that value is a string
      value={field.state.value}
      onBlur={field.handleBlur}
      // @ts-expect-error DeepKeysByType ensures that callback takes a string
      onChange={(event) => field.handleChange(event.target.value)}
      intent={field.state.meta.errors.length > 0 ? 'danger' : 'none'}
    />
  );
}
export type InputGroupFieldProps<FormValues> = InputGroupProps & {
  field: Omit<FieldComponentProps<FormValues>, 'name'> & {
    name: DeepKeysByType<FormValues, string>;
  };
};

export function InputGroupField<FormValues>(
  props: InputGroupFieldProps<FormValues>,
) {
  const { useField } = useForm<FormValues>();
  const { field: fieldConfig, ...otherProps } = props;

  const field = useField(fieldConfig);
  return (
    <InputGroup
      {...otherProps}
      // @ts-expect-error DeepKeysByType ensures that value is a string
      value={field.state.value}
      onBlur={field.handleBlur}
      // @ts-expect-error DeepKeysByType ensures that callback takes a string
      onChange={(event) => field.handleChange(event.target.value)}
      intent={field.state.meta.errors.length > 0 ? 'danger' : 'none'}
    />
  );
}

Did you find this page helpful?