@ava3v/ui-react (0.1.156)
Installation
@ava3v:registry=https://git.ava3v.ru/api/packages/Administrator/npm/npm install @ava3v/ui-react@0.1.156"@ava3v/ui-react": "0.1.156"About this package
@ava3v/ui-react
React-версия библиотеки компонентов @ava3v/ui (порт @ava3v/ui-vue): общие CSS-токены,
темы, плотности и headless-логика — собственный React-слой компонентов. Версии обоих пакетов
выпускаются синхронно одной цифрой.
Установка
В .npmrc проекта:
@ava3v:registry=https://git.ava3v.ru/api/packages/Administrator/npm/
npm install @ava3v/ui-react
Пиры: react и react-dom 18 или 19. write-excel-file — опциональный пир,
нужен только для экспорта грида в XLSX (подгружается лениво).
Подключение
import '@ava3v/ui-react/dist/ui.css' // токены, темы, плотности, стили компонентов
import { Ava3vButton, Ava3vDataGrid, Ava3vNotify, Ava3vDialogHost, notify, ava3vConfirm } from '@ava3v/ui-react'
Ava3vNotify и Ava3vDialogHost монтируются один раз на приложение (обычно в корневом
лейауте) — без них notify(...) и ava3vConfirm(...) не имеют куда рендериться:
export function AppRoot() {
return (
<>
<AppRoutes />
<Ava3vNotify />
<Ava3vDialogHost />
</>
)
}
Тема и плотность
Темы и плотности управляются атрибутами на контейнере приложения:
<div data-theme="dark" data-density="compact">…</div>
Манифест токенов темы (для экранов настройки): ava3vThemeTokens (+ типы
Ava3vThemeToken, Ava3vThemeTokenGroup).
Локаль
import { setAva3vLocale, setAva3vLocaleMessages } from '@ava3v/ui-react'
setAva3vLocale('en') // компоненты перерисовываются сами
Серверный грид
Контракт серверной загрузки общий с Vue-версией — см. docs/datagrid-backend-contract.md (включая раздел с React-примерами):
import { Ava3vDataGrid, createRemoteDataStore } from '@ava3v/ui-react'
const store = createRemoteDataStore({ loadUrl: '/api/items/load' })
<Ava3vDataGrid store={store} columns={columns} rowKey="id"
showFilterRow showHeaderFilterButtons stateStorageKey="items" />
Эталонный экран «реестр + карточка» — в плейграунде репозитория: пункт «React: реестр + карточка» (режим React в шапке).
Тесты
npm test # из папки react/
Версионирование
Пакет на стадии 0.x: релизы частые, синхронные с @ava3v/ui-vue. Ломающие изменения
до 1.0 возможны в минорных/патч-версиях и всегда отмечаются в CHANGELOG.md
в секции «Ломающие» — перед обновлением сверяйтесь с ним. Публикация — см.
PUBLISHING.md.
Отличия от Vue-версии
spinnerReact-аналога не имеет и считается устаревшим — используйтеAva3vLoaderилиAva3vSkeleton.
Dependencies
Peer Dependencies
| ID | Version |
|---|---|
| react | ^18.0.0 || ^19.0.0 |
| react-dom | ^18.0.0 || ^19.0.0 |
| write-excel-file | ^4.1.1 |