Internationalisation

Tous les textes de @lh-ui/react proviennent de @lh-ui/share/locales ; la bibliothèque ne détient aucune copie des textes.

Packs de langue

Deux packs de langue sont intégrés, tous deux importables directement depuis l'entrée du paquet :

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

Pack de langue	Valeur locale
zhCN	zh-CN (par défaut)
enUS	en-US

Bascule via ConfigProvider

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

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

LhConfigProvider appelle lhlocale.setLocale(locale) dans un useEffect, avec une portée globale (services impératifs message inclus).

Lecture depuis un composant

Utiliser useLhLocale() pour récupérer la fonction de traduction :

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

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

  return (
    <>
      <p>Langue courante : {getLocale()}</p>
      <p>{t('input.placeholder')}</p>
      {/* Le deuxième paramètre de t sert à l'interpolation dynamique */}
      <p>{t('form.required', 'Ce champ est obligatoire')}</p>
    </>
  )
}

Méthode	Description
t(path, fallbackOrParams?)	Traduit ; lorsque le deuxième paramètre est une chaîne, il sert de repli, et lorsqu'il s'agit d'un objet, d'interpolation ; en l'absence de valeur, retour au texte de la clé
tm(path)	Récupère le message brut (entrées sous forme de tableau)
getLocale()	Valeur locale courante
version	Numéro de version du pack de langue (utilisé en interne pour déclencher le rerendu)

Mise à jour réactive

useLhLocale s'abonne au singleton global de locale de share via useSyncExternalStore : tout appel à lhlocale.setLocale() n'importe où déclenche le rerendu de tous les composants consommateurs.

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

// Bascule impérative (hors ConfigProvider)
lhlocale.setLocale('en-US')

Étendre les packs de langue

Les packs de langue sont des objets ordinaires, que l'on peut étendre soi-même avant de les passer à LhConfigProvider. La structure hiérarchique des clés est à calquer sur zhCN.

SSR

L'instantané serveur et l'instantané client de useSyncExternalStore sont tous deux version : l'abonnement ne provoque pas de discordance d'hydratation côté serveur.