Перейти к основному содержимому

Быстрый старт

Эта страница предполагает, что вы уже завершили Установку и подключили theme.css и стили используемых компонентов.

Устанавливать не нужно​

У @lh-ui/react нет плагин-механизма: всё является именованным экспортом — просто импортируйте по необходимости.

import { LhButton } from '@lh-ui/react'
import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/button'

export default function App() {
  return <LhButton type="primary">Начать работу</LhButton>
}

Контролируемый и неконтролируемый режимы​

Компоненты поддерживают как value + onChange (контролируемый режим), так и defaultValue (неконтролируемый), по семантике соответствуя нативным формам React:

import { useState } from 'react'
import { LhInput } from '@lh-ui/react'

function Demo() {
  const [value, setValue] = useState('')

  return (
    <>
      {/* Контролируемый */}
      <LhInput value={value} onChange={(val) => setValue(val)} />

      {/* Неконтролируемый */}
      <LhInput defaultValue="Значение по умолчанию" />
    </>
  )
}
Коллбэки событий принимают два аргумента

onChange у каждого компонента формы принимает (value, event): первый аргумент — новое значение, второй — нативное событие. Это изоморфно emit('change', [val, e]) из lh-ui-plus и упрощает миграцию с Vue.

Глобальная настройка​

Используйте LhConfigProvider, чтобы передать глобальный размер, язык и переменные темы:

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

export default function App() {
  return (
    <LhConfigProvider size="middle" locale="zh-CN">
      <YourApp />
    </LhConfigProvider>
  )
}

Даже без LhConfigProvider компоненты не выдадут ошибку — на стороне потребителя есть запасное значение по умолчанию со всеми полями undefined.

Императивные сервисы​

Императивные сервисы вроде message монтируются через лениво создаваемый контейнер-одиночку; React root создаётся при первом вызове:

import { message, notification, loading } from '@lh-ui/react'
import '@lh-ui/react/style/message'

message.success('Сохранено успешно')
notification.success({ title: 'Сохранено успешно', content: 'Работа опубликована в галерее.' })
loading.show({ text: 'Отправка…' })

Назначение трёх сервисов: message — лёгкое верхнее уведомление, notification — угловое уведомление с заголовком и текстом, loading — полноэкранный или локальный индикатор загрузки. Подробности — в документации каждого компонента.

Отношение с lh-ui-plus​

@lh-ui/react и @lh-ui/vue3 (lh-ui-plus) имеют общий источник и структуру:

  • Логика компонентов полностью одинакова, берётся из @lh-ui/share/core; ни одна из библиотек не хранит копию логики
  • Стили полностью одинаковы, берутся из @lh-ui/share/styles; BEM-имена классов соответствуют один к одному
  • props совпадают по имени и смыслу, лишь адаптированы под React-идиомы (v-model → value/onChange и т. д.)

При миграции с Vue прочитайте Руководство по миграции.

Серверный рендеринг (SSR)​

Компоненты безопасны для SSR: все DOM-операции выполняются внутри useEffect / useIsomorphicLayoutEffect, а useLhLocale предоставляет SSR-снимок через useSyncExternalStore. При вызове на сервере императивные сервисы (message и др.) лишь записывают предупреждение и no-op.