Internationalization

All messages of @lh-ui/react come from @lh-ui/share/locales; this library holds no message copies.

Language packs

Two language packs are built in and can be imported directly from the package entry:

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

Pack	locale value
zhCN	zh-CN (default)
enUS	en-US

Switching via ConfigProvider

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

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

Inside, LhConfigProvider calls lhlocale.setLocale(locale) in a useEffect, which applies globally (including imperative services like message).

Reading in components

Use useLhLocale() to get the translation function:

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

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

  return (
    <>
      <p>Current locale: {getLocale()}</p>
      <p>{t('input.placeholder')}</p>
      {/* The second argument of t is dynamic interpolation */}
      <p>{t('form.required', 'This field is required')}</p>
    </>
  )
}

Method	Description
t(path, fallbackOrParams?)	Translate; a string second argument is the fallback, an object is interpolated; without it the path itself is returned
tm(path)	Get the raw message (entries in array form)
getLocale()	The current locale value
version	Language pack version (used internally to trigger re-renders)

Reactive updates

useLhLocale subscribes to share's global locale singleton via useSyncExternalStore: any lhlocale.setLocale() call re-renders all consuming components automatically.

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

// Imperative switching (when not going through ConfigProvider)
lhlocale.setLocale('en-US')

Extending language packs

A language pack is a plain object — extend it yourself and pass it to LhConfigProvider. See zhCN for the key structure.

SSR

Both the server snapshot and the client snapshot of useSyncExternalStore are version, so subscribing never causes a hydration mismatch on the server.