zesty-coffee

is ReactFormApi interface exported somehwere?

is there a way to import ReactFormApi?

9 Replies

sensitive-blue•15mo ago

Currently not, what is the usecase? 🙂

zesty-coffeeOP•15mo 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

sensitive-blue•15mo 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 🙂

zesty-coffeeOP•15mo ago

thanks!

wise-white•15mo 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.

sensitive-blue•15mo 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! 😄

wise-white•15mo 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.

sensitive-blue•15mo 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

wise-white•15mo 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'}
    />
  );
}

Gaming

Programming

is ReactFormApi interface exported somehwere?

Did you find this page helpful?