https://github.com/wqr11/efforms
✨ Lightweight form management library built on top of ☄️ effector
https://github.com/wqr11/efforms
effector lightweight react state-management svelte vue
Last synced: 3 months ago
JSON representation
✨ Lightweight form management library built on top of ☄️ effector
- Host: GitHub
- URL: https://github.com/wqr11/efforms
- Owner: wqr11
- Created: 2025-10-08T19:44:15.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-10-10T20:45:10.000Z (3 months ago)
- Last Synced: 2025-10-12T10:32:08.796Z (3 months ago)
- Topics: effector, lightweight, react, state-management, svelte, vue
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/efforms
- Size: 7.81 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# efforms 📝
Легковесная библиотека для работы с формами, построенная на основе [effector](https://effector.dev/).
## ✨ Особенности
- 🎯 **Type-safe** - полная поддержка TypeScript
- ⚡ **Реактивность** - построено на Effector
- 🔒 **Валидация** - встроенная система валидации с поддержкой множественных правил
- 🎨 **Гибкость** - легко интегрируется с любыми UI фреймворками
- 📦 **Минимализм** - без лишних зависимостей
- 🔄 **Управление состоянием** - автоматическое управление полями и ошибками
## 📦 Установка
```bash
npm install efforms effector
```
## 📚 API
`new Form(initialValues, rules?, validCallback?, nonValidCallback?)`
Создает новый экземпляр формы.
### Параметры:
`initialValues: T` - начальные значения полей формы
`rules?: FormRulesType` - правила валидации (опционально)
`validCallback?: EventCallable` - коллбек при успешной валидации (опционально)
`nonValidCallback?: EventCallable` - коллбек при неуспешной валидации (опционально)
### Stores (сторы)
`$fields: Store` - store с текущими значениями полей
`$errors: Store>` - store с ошибками валидации
### Events (ивенты)
`setFields: Event>` - установить значения полей
`setErrors: Event>` - установить ошибки
`reset: Event` - сбросить форму к начальным значениям
`clearErrors: Event` - очистить все ошибки
### Effects (эффекты)
`validate: Effect` - выполнить валидацию формы
### Handlers (обработчики)
`$handlers: Record void>` - автоматически созданные обработчики для каждого поля
## 🔍 Примеры использования
### Базовая форма без валидации
```typescript
const simpleForm = new Form({
username: '',
age: 0,
});
// Изменение значений
simpleForm.$handlers.username('john_doe');
simpleForm.$handlers.age(25);
// Сброс формы
simpleForm.reset();
```
### Множественные правила валидации
```typescript
const form = new Form(
{ password: '' },
{
password: [
(value) => {
if (!value) {
return { valid: false, errors: ['Поле обязательно'] };
}
return { valid: true };
},
(value) => {
if ((value as string).length < 8) {
return { valid: false, errors: ['Минимум 8 символов'] };
}
return { valid: true };
},
(value) => {
if (!/[A-Z]/.test(value as string)) {
return { valid: false, errors: ['Нужна заглавная буква'] };
}
return { valid: true };
},
(value) => {
if (!/[0-9]/.test(value as string)) {
return { valid: false, errors: ['Нужна цифра'] };
}
return { valid: true };
},
],
},
);
```
## 🤝 Совместимость
- `"effector": "^22.0.0 || ^23.0.0"`
- `"typescript": "^4.0.0 || ^5.0.0 || ^6.0.0"`
- Любые UI фреймворки (React, Vue, Solid, Svelte и т.д.)
## 📝 Лицензия
- MIT
## 🐛 Сообщить о проблеме
Нашли баг? Создайте issue
## ⭐ Поддержка проекта
Если вам нравится efforms, поставьте звезду на GitHub!