FormProvider
Configure unified runtime registries and the global field component registry.
FormProvider
<FormProvider> provides the unified FormRegistries object to your entire application. This includes the field component registry, custom validators, option resolvers, and expression functions.
API Reference
FormProviderProps
Prop
Type
FormRegistries
The unified container for all named runtime functions and components:
interface FormRegistries {
/**
* Field component registry. Maps field type strings to renderer components.
* (e.g., `{ text: MyTextField, select: MySelect }`)
*/
fields?: Record<string, ComponentType<any>>;
/** Custom validators for validation checks with `type: "name"`. */
validators?: Record<string, ValidatorFn>;
/** Async option resolvers for `{ resolver: "name" }` configs. */
resolvers?: Record<string, OptionResolverFn>;
/** Expression functions for `{ $fn: "name" }` in any Expr position. */
fns?: Record<string, ExprFn>;
}Basic Setup
Wrap your app root with the provider. Pass your field components via registries.fields:
import { FormProvider } from "@buildnbuzz/form-react";
import { registry } from "@/components/buzzform/registry";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<FormProvider
registries={{
fields: registry,
validators: { /* global validators */ },
resolvers: { /* global resolvers */ }
}}
>
{children}
</FormProvider>
</body>
</html>
);
}useRegistry Hook
Access the field component registry in your components. This hook automatically falls back from registries.fields to the deprecated registry prop:
import { useRegistry } from "@buildnbuzz/form-react";
function CustomFormRenderer() {
const registry = useRegistry();
// Use registry to look up field components
const TextComponent = registry.text;
return TextComponent ? <TextComponent /> : null;
}Registry Merge Behavior
Registries defined at the form level (via useForm or <Form>) are shallow-merged over the global registries from FormProvider. This allows you to provide a core set of reusable validators and resolvers globally while overriding them for specific forms.
// Global provider
<FormProvider registries={{ validators: { unique: globalUnique } }}>
{/* Form override */}
<Form registries={{ validators: { unique: localUnique } }}>
{/* Uses localUnique */}
</Form>
</FormProvider>Example: Complete Registry
If you installed with @buzzform/all, the field component registry is pre-built at components/buzzform/registry.ts:
"use client";
import type { FieldRegistry } from "@buildnbuzz/form-react";
import { TextField } from "./fields/text";
import { EmailField } from "./fields/email";
// ... all field imports
export const registry: FieldRegistry = {
text: TextField,
email: EmailField,
// ... all field mappings
};Set it up globally:
<FormProvider registries={{ fields: registry }}>
<App />
</FormProvider>