npm package: @schema-forms-data/renderer
Description: Form renderer for SchemaForms — renders FormSchema with react-hook-form
Author: SchemaForms
Latest version: 4.0.7

# @schema-forms-data/renderer

[![npm](https://img.shields.io/npm/v/@schema-forms-data/renderer)](https://www.npmjs.com/package/@schema-forms-data/renderer)
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](../../LICENSE)

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

## Install

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

## Basic usage

```tsx
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:

```tsx
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:

```css
/* 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](https://github.com/SchemaFormsData)