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

インストール

必要条件​

  • React ^18.0.0 または ^19.0.0
  • TypeScript >= 5.0（任意ですが推奨）

@lh-ui/react の唯一のランタイム依存は @lh-ui/share —— ファミリーのフレームワーク非依存な共有層（コンポーネントロジック、スタイル、テーマ、文言）です。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'

// コンポーネントスタイル（オンデマンド）：使うコンポーネントごとに 1 行
import '@lh-ui/react/style/button'
import '@lh-ui/react/style/input'

テーマ CSS とコンポーネント CSS のクラス名は完全に一致しているため、@lh-ui/share から同じ SCSS ソースを直接インポートして自分でコンパイルすることもできます：

@use '@lh-ui/share/styles/theme/common/var.scss';
@use '@lh-ui/share/styles/button';
なぜ全量を注入しないのか

React エコシステムではオンデマンドインポートが主流であり、全量スタイルの side-effect は 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 の直近 2 つの安定版）。コンポーネントは CSS カスタムプロパティ（var(--lh-*)）を多用しているため、IE はサポートしません。