@schema-forms-data/renderer

Renders a FormSchema as a live, multi-step form powered by react-hook-form.

Install

npm install @schema-forms-data/renderer react-hook-form lucide-react

Basic usage

import { FormRenderer } from "@schema-forms-data/renderer";
import type { FormSchema } from "@schema-forms-data/core";

const schema: FormSchema = {
  /* ... */
};

export default function Page() {
  return (
    <FormRenderer
      schema={schema}
      formTitle="Registration"
      onSubmit={(values) => console.log(values)}
    />
  );
}

Props

| Prop | Type | Default | Description | | ----------------------- | ---------------------------------------------------- | ----------------- | ---------------------------------------------------- | | schema | FormSchema | required | The form definition | | formTitle | string | "" | Title shown above the form | | template | string | "moderno" | Visual template key | | externalData | Record<string, unknown> | {} | Data available in conditions and field interpolation | | onSubmit | (values) => void\|Promise<void> | required | Called with form values on final step submit | | onStepChange | (step: number) => void | — | Called when the user navigates between steps | | uploadFile | (file: File, fieldName: string) => Promise<string> | — | Inject your own file upload logic | | cepLookup | (cep: string) => Promise<CepLookupResult> | ViaCEP public API | Inject your own CEP/zip lookup | | resolveTermsUploadUrl | (uploadId: string) => Promise<string> | — | Resolve URL of a terms PDF by its upload ID | | StepIndicator | React.ComponentType<StepIndicatorProps> | built-in | Custom step indicator component | | submitLabel | string | "Enviar" | Label of the submit button | | nextLabel | string | "Próximo" | Label of the next button | | prevLabel | string | "Voltar" | Label of the prev button |

Inject dependencies (RendererContext)

All integrations are injectable — the renderer never makes HTTP calls directly:

import { FormRenderer } from '@schema-forms-data/renderer';

<FormRenderer
  schema={schema}
  formTitle="Event Registration"
  externalData={{ eventName: 'React Conf', price: 150 }}
  uploadFile={async (file, fieldName) => {
    const url = await myApi.upload(file);
    return url;
  }}
  cepLookup={async (cep) => {
    const data = await myApi.getCep(cep);
    return { logradouro: data.street, bairro: data.district, ... };
  }}
  onSubmit={async (values) => {
    await myApi.submitRegistration(values);
  }}
/>

CSS customization

The renderer uses sfr-* CSS class names — no Tailwind or shadcn dependency:

/* Override form styles */
.sfr-input {
  /* text inputs */
}
.sfr-label {
  /* field labels */
}
.sfr-error {
  /* validation error messages */
}
.sfr-step-header {
  /* step title area */
}
.sfr-form-actions {
  /* submit/next/prev buttons area */
}

License

MIT © SchemaFormsData