FormErrorProvider

Provider component from @piplup/rhf-core that centralizes form error handling and mapping for friendly error messages.

Import

import { FormErrorProvider } from "@piplup/rhf-core";

Usage

Wrap your form with FormErrorProvider. Provide an errorParser function to translate raw error objects into user-friendly messages, or rely on default behavior.

"use client";import { useForm } from "react-hook-form";import { FormErrorProvider } from "@piplup/rhf-core";import {  HtmlFormHelperTextElement,  HtmlInputElement,} from "@piplup/rhf-adapters/html";export default function Page() {  const { control, handleSubmit } = useForm();  return (    <FormErrorProvider      errorParser={(error) => {        const message = error?.message;        if (typeof message === "string") {          switch (message) {            case "message.field.required":              return "This field is required";            default:              return message;          }        }        return null;      }}    >      <form        noValidate        onSubmit={handleSubmit((data) => {          alert(JSON.stringify(data, null, 2));        })}      >        <div>          <HtmlInputElement            control={control}            name="message"            required            className="border px-2 rounded"            messages={{              required: "message.field.required",            }}          />          <HtmlFormHelperTextElement            control={control}            name="message"            style={({ error }) => ({              ...(error && { color: "red" }),            })}            renderOnError          />        </div>        <button          type="submit"          className="bg-black hover:bg-black/90 px-4 py-1 text-white rounded mt-3"        >          Submit        </button>      </form>    </FormErrorProvider>  );}

Props

Prop

Type

Patterns

Global mapping: Use a single errorParser at the app root to ensure consistent copy and localization.
Field-level overrides: Components can still render custom error messages when they need special phrasing.
i18n: Combine errorParser with your localization system to return translated messages.

Notes

FormErrorProvider does not replace form validation — it only maps and exposes error messages for rendering.
FormContainer is pre-configured with FormErrorProvider, so you can directly use errorParser prop without wrapping with another FormErrorProvider.