Is there any example on how to use the useField Hook?

[Eyon42]

I've been trying to figure it out, but I'm having a hard time.

Also, I found that createUseField is in the docs but it's not exposed as part of the module

https://tanstack.com/form/latest/docs/framework/react/reference/useField#createusefield

[Eyon42]

For more context

I'm having a use case where I need to use the form API in múltiple nested react components and passing as a prop is not an option.

Currently I'm doing this, but it seems like I'm reinventing the wheel

import { type FormApi, useForm } from "@tanstack/react-form";
import { zodValidator } from "@tanstack/zod-form-adapter";
import { createContext, useContext, type ReactNode } from "react";

const NewGroupFormContext = createContext<FormApi<
  typeof defaultValues,
  typeof zodValidator
> | null>(null);

export const useNewGroupForm = () => {
  const form = useContext(NewGroupFormContext);
  if (form === null) {
    throw new Error("useNewGroupForm must be used within a NewGroupLayout");
  }
  return form;
};

type NewGroupLayoutProps = {
  children: ReactNode;
};

const defaultValues = {
  groupName: "",
};

export default function NewGroupLayout({ children }: NewGroupLayoutProps) {
  const form = useForm({
    defaultValues,
    validator: zodValidator,
  });
  return (
      <NewGroupFormContext.Provider value={form}>
        <form.Provider>{children}</form.Provider>
      </NewGroupFormContext.Provider>
  );
}

[crutchcorn]

This looks fine to me overall. What's not working or missing?