Форма за минуту
import { createModel, createForm, validateFormModel } from '@reformer/core';
import { required, email } from '@reformer/core/validators';
import { FormField, Input, Button } from '@reformer/ui-kit';
// 1. Модель — источник истины значений
const model = createModel<{ email: string }>({ email: '' });
// 2. Схема — привязка поля к сигналу + компонент + валидаторы
const schema = {
email: {
value: model.$.email,
component: Input,
componentProps: { label: 'Email', type: 'email' },
validators: [required(), email()],
},
};
// 3. Форма — узлы поверх сигналов модели
const form = createForm({ model, schema });
// 4. Тонкий JSX — FormField делает всю работу
function ContactForm() {
const onSubmit = async (e) => {
e.preventDefault();
const { valid } = await validateFormModel(model, schema);
if (valid) console.log(model.get());
};
return (
<form onSubmit={onSubmit}>
<FormField control={form.email} />
<Button type="submit">Отправить</Button>
</form>
);
}
Реактивность по умолчанию
Построено на Preact Signals для точечной реактивности. Перерисовываются только компоненты, использующие изменённые значения.
Типобезопасные формы
Полная поддержка TypeScript с автоматическим выводом типов. Ловите ошибки на этапе компиляции, а не в рантайме.
Декларативная валидация
14 встроенных валидаторов, асинхронная валидация и простое создание кастомных валидаторов. Определите правила один раз — применяйте везде.
Умные поведения
Вычисляемые поля, условная видимость, синхронизация полей. Сложная логика форм стала простой.
Вложенные структуры
Поддержка глубоко вложенных объектов и динамических массивов. Создавайте любую структуру форм.
Фреймворк-агностик
Ядро работает где угодно. React-биндинги включены, поддержка других фреймворков скоро.
AI-Friendly
Хорошо документированный API с понятными паттернами. ИИ-ассистенты легко понимают и генерируют код с ReFormer.