README

Install

npm install @paragrav/rhf-utils  # npm
pnpm install @paragrav/rhf-utils # pnpm
yarn add @paragrav/rhf-utils     # yarn

Config

To configure, create a file like src/integrations/paragrav-rhf-utils/config.tsx with desired config:

const config: ClientConfig = {
  defaultOptions: {
    form: {
      devTool: {
        placement: 'top-right',
      },
    },
  },

  FormComponent: Form.Root,

  onSubmitError: (error) => {
    if (!(error instanceof TRPCClientError)) throw error;


    const errors = trcpClientErrorToRhfErrorTransformer.parse(error);

    return new FormSubmitError(errors);
  },

  Children: {
    top: function Top({ options }) {
      // navigation blocker
      useFormRouterBlocker(!!options?.prompter);

      return null;
    },
    bottom: () => (
      <>
        // global error list
        <RootErrorsListFromFlatFieldErrorsContext />
      </>
    ),
  },
};

Provider

And add our context provider to your stack:

<RhfUtilsClientForZodContextProvider config={config}>
  {children}
</RhfUtilsClientForZodContextProvider>

Usage

Coming soon.