Best practice for accessing form outside of component

export function useMyForm() {
  const form = useForm({...});

  return form;
}

type FormInstance = ReturnType<typeof useMyForm>;

interface SearchFormProps {
  form: FormInstance;
}
export function SearchForm({ form }: SearchFormProps) {
  return (
      <form>
        <form.Field>
// etc..

export function useMyForm() {
  const form = useForm({...});

  return form;
}

type FormInstance = ReturnType<typeof useMyForm>;

interface SearchFormProps {
  form: FormInstance;
}
export function SearchForm({ form }: SearchFormProps) {
  return (
      <form>
        <form.Field>
// etc..

What is the best practice for using the form (e.g. submitting/resetting etc) outside of the component? I'm currently creating the form near the root and just passing it as props, but want to avoid prop drilling as much as possible

TanStack•4mo ago•

4 replies

moderate-tomato

Best practice for accessing form outside of component

export function useMyForm() {
  const form = useForm({...});

  return form;
}

type FormInstance = ReturnType<typeof useMyForm>;

interface SearchFormProps {
  form: FormInstance;
}
export function SearchForm({ form }: SearchFormProps) {
  return (
      <form>
        <form.Field>
// etc..

export function useMyForm() {
  const form = useForm({...});

  return form;
}

type FormInstance = ReturnType<typeof useMyForm>;

interface SearchFormProps {
  form: FormInstance;
}
export function SearchForm({ form }: SearchFormProps) {
  return (
      <form>
        <form.Field>
// etc..

Best practice for accessing form outside of component

Best practice for accessing form outside of component

Similar Threads