T
TanStack•6d ago
conscious-sapphire

What is the recommandation for composition, AppForm provider and DOM form element?

Hi TanStack team! Context: • createFormHook to compose our UI components into the form hook. • createFormHookContexts to get formContext and fieldContext for our provider/consumers. • To access form.handleSubmit from the hook, I pass our DOM form component to formComponents. 
// contexts
const {
  fieldContext,
  formContext,
  useFormContext: useTanstackUnityFormContext,
} = createFormHookContexts()
// hook with components
const { useAppForm: useTanstackUnityForm } = createFormHook({
  fieldComponents: {
    Label: TanstackFormLabel,
    HelperText: TanstackFormHelperText,
    FeedbackText: TanstackFormFeedbackText,
    RawContextualLink: TanstackRawFormContextualLink,
    Input: TanstackInput,
    TextArea: TanstackTextArea,
    TextField: TanstackTextField,
  },
  formComponents: {
    TanstackForm, // our DOM <form/>
  },
  fieldContext,
  formContext,
})

//Usage today
const form = useTanstackUnityForm({ validators: { onBlur: schema } })
return (
  <form.AppForm>
    <form.TanstackForm className="...">
      <form.AppField name="inputFieldName">
        {field => <field.TextField label="Field name" />}
      </form.AppField>
      <button type="submit">Submit</button>
    </form.TanstackForm>
  </form.AppForm>
)
// contexts
const {
  fieldContext,
  formContext,
  useFormContext: useTanstackUnityFormContext,
} = createFormHookContexts()
// hook with components
const { useAppForm: useTanstackUnityForm } = createFormHook({
  fieldComponents: {
    Label: TanstackFormLabel,
    HelperText: TanstackFormHelperText,
    FeedbackText: TanstackFormFeedbackText,
    RawContextualLink: TanstackRawFormContextualLink,
    Input: TanstackInput,
    TextArea: TanstackTextArea,
    TextField: TanstackTextField,
  },
  formComponents: {
    TanstackForm, // our DOM <form/>
  },
  fieldContext,
  formContext,
})

//Usage today
const form = useTanstackUnityForm({ validators: { onBlur: schema } })
return (
  <form.AppForm>
    <form.TanstackForm className="...">
      <form.AppField name="inputFieldName">
        {field => <field.TextField label="Field name" />}
      </form.AppField>
      <button type="submit">Submit</button>
    </form.TanstackForm>
  </form.AppForm>
)
Questions: • To get handleSubmit from the hook, I pass TanstackForm via formComponents. But I still have to wrap form.TanstackForm inside form.AppForm (the provider). This feels like I’m duplicating the “form” constructs: a provider (AppForm) and the DOM form (TanstackForm). • Is this the recommended pattern with createFormHook + createFormHookContexts? Or is there a way to have a single top-level form element that covers both the provider and the actual <form> DOM element? • In other words, can/should form.TanstackForm also provide the context so we don’t need an extra form.AppForm wrapper? Or is there another composition approach you recommend to avoid this duplication? Any guidance or examples would be greatly appreciated. Thanks!
2 Replies
jolly-crimson
jolly-crimson•6d ago
yes, because not everything with context is bound to the DOM for example, submit button form components can be outside of a DOM form element, as long as the form prop points to its id you can also have logic-based components like a navigation blocker
conscious-sapphire
conscious-sapphireOP•6d ago
@Luca | LeCarbonator thank you very much for the quick answer 🙂

Did you find this page helpful?