Примеры
Живые примеры запускаются в песочнице react-playground. Интерактивную документацию отдельных компонентов смотрите в разделе @reformer/ui-kit (Variants / Examples / API у каждого компонента).
Одна форма — три подхода
Флагманский пример — многошаговая заявка на кредит — реализован тремя способами
на одной и той же сборке createForm. Это лучший способ понять, чем отличаются слои экосистемы.
🧱 Core + ручной JSX
createForm + FormWizard, поля выведены как <FormField control={form.x} />. Максимум контроля.
/demo/complex🖼️ renderer-react
Та же сборка, форму рисует FormRenderer по дереву схемы. Форма как данные.
/demo/complex-renderer📄 renderer-json
Та же сборка, схема — документ JSON + реестр компонентов. Форма приходит данными с бэкенда.
/demo/json-rendererЧем отличаются подходы
| Подход | Форма описана | Когда выбирать |
|---|---|---|
| Core + JSX | React-кодом (<FormField control={form.x} />) | Нужен полный контроль над разметкой и логикой шага. |
| renderer-react | TS-схемой ((model) => FormSchemaNode) | Форма — данные; хочется декларативности без ручного JSX на каждое поле. |
| renderer-json | JSON-документом + реестром | Форма приходит с бэкенда/CMS, генерируется или конфигурируется без пересборки. |
Все три собираются одним createForm (application/create.ts примера): модель, правила, поведение и
поток шагов общие — меняется только то, чем описана схема и кто её рисует. Раскладка примера по
папкам разобрана в Структуре проекта.
Фокусные примеры
- Валидация — встроенные валидаторы (
/demo/validation). - Behaviors — реактивные вычисления и условная видимость (
/demo/behaviors). - Регистрация — async-валидация + behaviors + маска телефона (
/demo/simple). - Реестр форм — та же JSON-форма заявки, смонтированная по id через
@reformer/form-registry(/demo/form-registry).