Administrator

Joined on 2025-04-12

@ava3v/ui-react (0.1.160)

Published 2026-09-09 16:43:05 +03:00 by Administrator

Set up this registry in your project .npmrc file:

@ava3v:registry=https://git.ava3v.ru/api/packages/Administrator/npm/

To install the package using npm, run the following command:

npm install @ava3v/ui-react@0.1.160

or add it to the package.json file:

"@ava3v/ui-react": "0.1.160"

For more information on the npm registry, see the documentation.

React-версия библиотеки компонентов `@ava3v/ui` (порт `@ava3v/ui-vue`): общие CSS-токены, темы, плотности и headless-логика — собственный React-слой компонентов. Версии обоих пакетов выпускаются синхронно одной цифрой.

@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-версии

spinner React-аналога не имеет и считается устаревшим — используйте Ava3vLoader или Ava3vSkeleton.

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

Details

npm

2026-09-09 16:43:05 +03:00

1.3 MiB

Assets (1)

ui-react-0.1.160.tgz 1.3 MiB

Versions (36) View all

0.1.179

2026-09-26

0.1.178

2026-09-21

0.1.177

2026-09-21

0.1.176

2026-09-20

0.1.175

2026-09-18