التدويل

تأتي نصوص @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 داخليًا lhlocale.setLocale(locale) داخل useEffect، فينطبق على كامل التطبيق (بما فيه الخدمات الحتمية مثل 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 في نسخة locale العمومية في share عبر useSyncExternalStore: أي استدعاء لـ lhlocale.setLocale() في أي مكان يُعيد تصيير جميع المكوّنات المستهلكة تلقائيًا.

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

// التبديل الحتمي (عند عدم استخدام ConfigProvider)
lhlocale.setLocale('en-US')

توسيع حزم اللغات

حزم اللغة كائنات عادية، يمكنك توسيعها بنفسك ثم تمريرها إلى LhConfigProvider. وارجع إلى البنية الهرمية للمفاتيح في zhCN.

SSR

لقطة الخادم ولقطة العميل لـ useSyncExternalStore كلاهما version، فلا يقع عدم تطابق في الترطيب (hydration) بسبب الاشتراك.