国際化

@lh-ui/react の文言はすべて @lh-ui/share/locales に由来し、本ライブラリは一切の文言の複製を持ちません。

言語パック

2 つの言語パックを内蔵しており、どちらもパッケージのエントリから直接インポートできます：

import { zhCN, enUS } from '@lh-ui/react'

言語パック	locale 値
zhCN	zh-CN（デフォルト）
enUS	en-US

ConfigProvider で切り替える

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

export default function App() {
  return (
    <LhConfigProvider locale="en-US">
      <YourApp />
    </LhConfigProvider>
  )
}

LhConfigProvider は内部で useEffect の中に lhlocale.setLocale(locale) を呼び出し、グローバルに有効になります（命令的サービス message なども含む）。

コンポーネント内で読み取る

useLhLocale() で翻訳関数を取得します：

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

function Demo() {
  const { t, tm, getLocale } = useLhLocale()

  return (
    <>
      <p>現在の言語：{getLocale()}</p>
      <p>{t('input.placeholder')}</p>
      {/* t の第 2 引数は動的補間 */}
      <p>{t('form.required', 'この項目は必須です')}</p>
    </>
  )
}

メソッド	説明
t(path, fallbackOrParams?)	翻訳。第 2 引数が文字列の時はフォールバック、オブジェクトの時は補間。省略時はパスの原文にフォールバック
tm(path)	生のメッセージを取得（配列形態のエントリ）
getLocale()	現在の locale 値
version	言語パックのバージョン番号（内部的に再描画の発火に使用）

レスポンシブな更新

useLhLocale は useSyncExternalStore で share のグローバル locale 単例を購読します：どこから lhlocale.setLocale() を呼んでも、すべての消費コンポーネントが自動的に再描画されます。

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

// 命令的な切り替え（ConfigProvider を経由しない場合）
lhlocale.setLocale('en-US')

言語パックの拡張

言語パックは通常のオブジェクトで、独自に拡張して LhConfigProvider に渡せます。キーの階層構造は zhCN を参照してください。

SSR

useSyncExternalStore の server snapshot と client snapshotはどちらも version で、サーバー側で購読によるハイドレーションの不一致は起きません。