useFormContext should be available through children

[wladpaiva]

Since we are using react-hook-form. It would be nice to have access to stuff like isSubmitting from the form children without having to pass it down the three.

Right now, the form is controlling the label of the button to indicate the form is submiting but if you are working with UI libs like Chakra, you might want to use somethnig like <Button isLoading />

[bvangraafeiland]

Ran into this issue as well. In my case, I want to have more control over the rendered submit button based on the form state - while submitting or if the form is invalid, the button should be disabled, and the button text while submitting should be a spinner. I know this is possible to some extent currently, but the pending label can only be a string for starters, and custom disabled logic is also not possible (without repeating this for every form).

[danielweinmann]

@wladiston @bvangraafeiland, I just added isLoading to the button on our Chakra UI example to demonstrate how we can accomplish that without useFormContext.

However, that solution will not work if you're using the fetcher prop. Because of that, I created #122 to create an even more sustainable solution.

[danielweinmann]

Regarding useFormContext, all methods returned by it are already passed to the children of Form, including formState, which has the isSubmitting value.

That said, I wouldn't use RHF's state to check for the pending state in Remix or React Router 6.4. I would useTransition, useNavigation, or useFetcher.

[bvangraafeiland]

Regarding useFormContext, all methods returned by it are already passed to the children of Form, including formState, which has the isSubmitting value.

That said, I wouldn't use RHF's state to check for the pending state in Remix or React Router 6.4. I would useTransition, useNavigation, or useFetcher.

I'm not seeing those props? This is what I see when logging the props of Input

And this for Button:

For the submitting state I was indeed using Remix's useTransition

[danielweinmann]

@bvangraafeiland, here's how you access the UseFormReturn:

<Form schema={schema}>
    {({ Field, Errors, Button, register, formState /* and everything in UseFormReturn, all type-safe to the schema */ }) => (<>/* Your markup */</>)}
  </Form>

[bvangraafeiland]

Yes, but that's meant to be used on a per-form basis, right? I think I'm not explaining this properly. What I'm looking for is a way to have the submit button:

• Have the disabled prop set based on a combination of Remix's transition and formState.isValid
• While submitting, the button's content should be a loading spinner - there is the pendingButtonLabel prop, but it's of type string. I guess this could be changed to ReactNode but in the end there is more flexibility if the custom component could access state through a hook.
• This behavior should be enabled by default on all forms that are created through my Form component based on createForm

Currently I have this behavior for a single form like this:

{({ Field, Button, Errors, formState }) => (
  <>
    <Field name="email" />
    <Field name="password" type="password" />
    <Errors />
    <Button disabled={!!transition.submission || (!formState.isValid && formState.submitCount > 0)}>
      Log in
    </Button>
  </>
)}

But that would need to be copied for every form. Having useFormState and useField available in custom components would make this, but also things like styling for errors, a lot easier. Currently I'm (ab)using the aria attributes being put on the input components for errors with tailwind using aria-invalid:border-red-600.

[danielweinmann]

Yeah, that's the use case I had in mind when creating #122. Your idea of adding hooks would also work, and I'd love to explore both :) if you create issues for them we'll explore that path as well.

[danielweinmann]

It took me some time, but I finally understood this issue 😅

If we always render a FormProvider inside our forms, it will enable the users to useFormContext anywhere inside any form. The solution is simple and looks harmless. I'll reopen the issue until we implement it.

[bvangraafeiland]

Yeah that would definitely solve my use case 👍 If it helps, I could try opening a PR for it?

[danielweinmann]

Yeah that would definitely solve my use case 👍 If it helps, I could try opening a PR for it?

Definitely! We'd really appreciate a PR, @bvangraafeiland 💪🏼

[danielweinmann]

Released on v1.3.0. Thanks for the PR, @bvangraafeiland 💪🏼 🎉