Provide hooks for context-like access

[tyteen4a03]

It would be great if the package isn't limited to renderProps but instead can let child component access state via hooks.

[MiroslavPetrik]

Yeah, I saw the useActionState results pushed into Context API in the react conf by Sam Selikoff.

What are your use cases for this?

[MiroslavPetrik]

I have a preliminary version which can be installed npm i react-form-action@next.

Here is example usage

The render props are now accessible via the useFormContext() hook.

There is simple & reusable <Pending> component implemented.

Others can be defined easily:

import { useFormContext } from "react-form-action/client";

function DebugValidationError() {
  const { isInvalid, validationError } = useFormContext();

  return isInvalid && JSON.stringify(validationError);
}

[MiroslavPetrik]

I've refactored the Form from createForm, so its not coupled with the context.
Having context separate out of form element enables us to read the action state outside of it.

This is good for UI styling, for example when we want to display the progress around the form, etc.

This is just a sketch, but the ActionForm eventually should be just Form.

import { Action, ActionForm } from "react-form-action/client";

function SubscribeForm() {
  return (
      <Action action={subscribeAction} initialData={null}>
          <ActionForm>
            <input type="text" name="email" data-testid="email" />
            <button type="submit" data-testid="submit" />
          </ActionForm>
           {/* Read action state outside of <form> (ActionForm) */
          <ValidationError />
        </Action>
  );
}

[MiroslavPetrik]

Ok, finally the context can be used for convenient JSX components like the recently added ZodFieldError which takes "errors" and "name" prop.
Now, with the useActionContext() the "errors" prop can be added internally, so users only need to specify the field name: