How to correctly create a React context for useAppForm?

[alekseykurylev]

Hi

I’m trying to create a React context/provider for useAppForm from @tanstack/react-form so I can use a shared form instance across multiple components. Here’s my current setup:

"use client";

import { createContext, ReactNode, useContext } from "react";
import { useAppForm } from "../lib/form-hook";

export const FormContext = createContext<
  ReturnType<typeof useAppForm> | undefined
>(undefined);

export function FormProvider({ children }: { children: ReactNode }) {
  const form = useAppForm({
    onSubmit: ({ value }) => {
      alert(JSON.stringify(value, null, 2));
    },
  });

  return (
    <FormContext.Provider value={form}>
      <form.AppForm>{children}</form.AppForm>
    </FormContext.Provider>
  );
}

export function useForm() {
  const context = useContext(FormContext);
  if (!context) {
    throw new Error("useForm must be used within FormProvider");
  }
  return context;
}

Any example of a generic FormProvider + useFormContext pattern with @tanstack/react-form?