國際化

@lh-ui/react 的文案全部來自 @lh-ui/share/locales，本庫不持有任何文案副本。

語言包

內建兩個語言包，均可從包入口直接引入：

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 的第二個參數是動態插值 */}
      <p>{t('form.required', '此项为必填')}</p>
    </>
  )
}

方法	說明
t(path, fallbackOrParams?)	翻譯，第二參數為字串時作兜底、為物件時作插值；缺省時回退到路徑原文
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，伺服器端不會因訂閱產生水合不匹配。