メインコンテンツへスキップ

クイックスタート

本ページは インストール を済ませ、theme.css と使用するコンポーネントのスタイルをインポートしていることを前提とします。

install は不要​

@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="デフォルト値" />
    </>
  )
}
イベントコールバックは 2 引数

すべてのフォームコンポーネントの onChange は (value, event) の 2 引数です：第 1 引数が新しい値、第 2 引数がネイティブイベントです。これは lh-ui-plus の emit('change', [val, e]) と同型で、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: '送信中…' })

3 つのサービスの役割：message は軽量な上部トースト、notification はタイトル / 本文を備えた四隅の通知、loading は全画面またはローカルのオーバーレイです。詳細はそれぞれのコンポーネントドキュメントを参照してください。

lh-ui-plus との関係​

@lh-ui/react と @lh-ui/vue3（lh-ui-plus）は同型・同源です：

  • コンポーネントロジックは完全に同一で @lh-ui/share/core 由来 —— どちらのライブラリもロジックの複製を持ちません
  • スタイルは完全に同一で @lh-ui/share/styles 由来 —— BEM クラス名が 1 対 1 で対応します
  • props は同名同義で、React の慣用形に合わせた書き換えのみ（v-model → value/onChange など）

Vue からの移行は 移行ガイド を読んでください。

サーバーサイドレンダリング（SSR）​

コンポーネントは SSR に対して安全です：DOM 操作はすべて useEffect / useIsomorphicLayoutEffect 内で実行され、useLhLocale は useSyncExternalStore で SSR スナップショットを提供します。命令的サービス（message など）をサーバー側で呼ぶと警告を出すだけで no-op になります。