Примеры

Живые примеры запускаются в песочнице react-playground. Интерактивную документацию отдельных компонентов смотрите в разделе @reformer/ui-kit (Variants / Examples / API у каждого компонента).

Одна форма — три подхода

Флагманский пример — многошаговая заявка на кредит — реализован тремя способами на одной и той же модели. Это лучший способ понять, чем отличаются слои экосистемы.

🧱 Core + ручной JSX

createForm + FormWizard, поля выведены как <FormField control={form.x} />. Максимум контроля.

/examples/complex

🖼️ renderer-react

Та же форма из декларативной render-схемы (createRenderSchema + FormRenderer). Форма как данные.

/examples/complex-renderer

📄 renderer-json

Та же форма целиком из JSON-схемы + реестр компонентов. Форма приходит данными с бэкенда.

/examples/json-renderer

Чем отличаются подходы

Подход	Форма описана	Когда выбирать
Core + JSX	React-кодом (<FormField control={form.x} />)	Нужен полный контроль над разметкой и логикой шага.
renderer-react	TS-схемой (RenderSchemaFn)	Форма — данные; хочется декларативности без ручного JSX на каждое поле.
renderer-json	JSON-схемой + реестром	Форма приходит с бэкенда/CMS, генерируется или конфигурируется без пересборки.

Все три работают на одной модели M1 (createModel), поэтому валидация и behaviors описываются одинаково — меняется только слой рендеринга.

Фокусные примеры

• Валидация — встроенные валидаторы (/examples/validation).
• Behaviors — реактивные вычисления и условная видимость (/examples/behaviors).
• Регистрация — async-валидация + behaviors + маска телефона (/examples/simple).
• Async Select — серверный поиск и пагинация опций (/examples/async-select).
• MCP-сгенерированные формы — вывод MCP-сервера для трёх слоёв (/examples/mcca-core-v20, /examples/mcca-renderer-react-v20, /examples/mcca-renderer-json-v20).