`useFormContext` should be available through children about remix-forms HOT 11 CLOSED

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.

from remix-forms.

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).

from remix-forms.

@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.

from remix-forms.

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.

from remix-forms.

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

from remix-forms.

@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>

from remix-forms.

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.

from remix-forms.

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.

from remix-forms.

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

from remix-forms.

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 💪🏼

from remix-forms.

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

from remix-forms.