Internacionalización

Todo el texto de @lh-ui/react proviene de @lh-ui/share/locales; esta biblioteca no mantiene ninguna copia de los textos.

Paquetes de idioma

Incluye dos paquetes de idioma, ambos importables directamente desde la entrada del paquete:

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

Paquete de idioma	Valor de locale
zhCN	zh-CN (predeterminado)
enUS	en-US

Cambio de idioma con ConfigProvider

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

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

LhConfigProvider internamente llama a lhlocale.setLocale(locale) dentro de useEffect, con efecto global (incluidos los servicios imperativos como message).

Lectura dentro de los componentes

Usa useLhLocale() para obtener la función de traducción:

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

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

  return (
    <>
      <p>Idioma actual: {getLocale()}</p>
      <p>{t('input.placeholder')}</p>
      {/* El segundo parámetro de t es la interpolación dinámica */}
      <p>{t('form.required', 'Este campo es obligatorio')}</p>
    </>
  )
}

Método	Descripción
t(path, fallbackOrParams?)	Traduce; el segundo parámetro, si es una cadena, actúa como respaldo y, si es un objeto, como interpolación; cuando se omite, se retrocede al texto de la ruta
tm(path)	Obtiene el mensaje original (entradas en forma de arreglo)
getLocale()	Valor de locale actual
version	Versión del paquete de idioma (usada internamente para provocar el rerrenderizado)

Actualización reactiva

useLhLocale se suscribe al singleton global de locale de share mediante useSyncExternalStore: cualquier llamada a lhlocale.setLocale() desde cualquier punto provoca el rerrenderizado automático de todos los componentes consumidores.

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

// Cambio imperativo (sin pasar por ConfigProvider)
lhlocale.setLocale('en-US')

Ampliación de los paquetes de idioma

Los paquetes de idioma son objetos simples: puedes ampliarlos por tu cuenta y pasarlos a LhConfigProvider. La estructura jerárquica de las claves se consulta en zhCN.

SSR

La instantánea del servidor y la del cliente de useSyncExternalStore son ambas version, de modo que el lado servidor no produce desajustes de hidratación por la suscripción.