Установка

Требования к окружению

• React ^18.0.0 или ^19.0.0
• TypeScript >= 5.0 (опционально, но рекомендуется)

Единственная зависимость времени выполнения @lh-ui/react — @lh-ui/share, framework-независимый общий слой семейства (логика компонентов, стили, темы, тексты). Единственные peer-зависимости — react и react-dom.

Установка через пакетный менеджер

pnpm add @lh-ui/react

npm install @lh-ui/react

yarn add @lh-ui/react

bun add @lh-ui/react

Подключение стилей

@lh-ui/react следует стратегии импорта по требованию (выровненной с @lh-ui/vue2): вход пакета не внедряет никаких стилей — переменные темы и стили компонентов подключаются раздельно.

// Переменные темы (обязательно): дизайнерские токены и тёмные переменные
import '@lh-ui/react/theme.css'

// Стили компонентов (по требованию): по одному импорту на каждый используемый компонент
import '@lh-ui/react/style/button'
import '@lh-ui/react/style/input'

Имена классов в CSS темы и CSS компонентов полностью совпадают, поэтому вы можете также импортировать те же исходники SCSS напрямую из @lh-ui/share и скомпилировать их самостоятельно:

@use '@lh-ui/share/styles/theme/common/var.scss';
@use '@lh-ui/share/styles/button';

Почему не внедряется всё сразу

Импорт по требованию — основной подход в экосистеме React, а побочный эффект полного подключения стилей сломал бы tree-shaking. Передача точки входа стилей пользователю позволяет бандлеру точно вырезать стили неиспользуемых компонентов.

Тёмная тема

Тёмные переменные находятся в theme-dark.css и взаимоисключающи с theme.css (выбирается одно из двух), либо тема переключается во время выполнения через useLhTheme / useLhPresetTheme:

import { useLhTheme } from '@lh-ui/react'

function App() {
  const { theme, toggleTheme } = useLhTheme()
  return <button onClick={toggleTheme}>{theme === 'dark' ? 'Переключить на светлую' : 'Переключить на тёмную'}</button>
}

Поддержка браузеров

Современные браузеры (последние две стабильные версии Chrome / Edge / Firefox / Safari). Компоненты активно используют кастомные CSS-свойства (var(--lh-*)), IE не поддерживается.