المؤلف:
    Aymeric PINEAU
    إنشاء:2026-01-21آخر تحديث:2026-01-21

    حزمة react-intlayer

    توفر حزمة react-intlayer الأدوات اللازمة لدمج Intlayer في تطبيقات React. تتضمن مزوِّدات السياق (context providers)، وhooks، ومكونات للتعامل مع المحتوى متعدد اللغات.

    التثبيت

    bash
    npm install react-intlayer

    الصادرات

    الموفرون

    استيراد:

    tsx
    import "react-intlayer";
    المكوّنالوصفالمستند ذي الصلة
    IntlayerProviderالمزود الرئيسي الذي يلف تطبيقك ويوفر سياق Intlayer. يتضمن دعم المحرر بشكل افتراضي.IntlayerProvider
    IntlayerProviderContentمكوّن مزود يركّز على المحتوى بدون ميزات المحرر. استخدمه عندما لا تحتاج إلى المحرر البصري.-
    HTMLProviderمزود لإعدادات التدويل المتعلقة بـ HTML. يسمح بتجاوز المكونات الخاصة بعناصر HTML.-

    هوكس

    استيراد:

    tsx
    import "react-intlayer";
    Hookالوصفالمستند المرتبط
    useHTMLRendererهوك للحصول على دالة عرض HTML مُكوّنة مسبقًا.-
    useMarkdownRendererهوك للحصول على دالة عرض Markdown مُكوّنة مسبقًا.-
    useIntlayerHook على جانب العميل يختار قاموسًا واحدًا بواسطة مفتاحه ويُعيد محتواه. يستخدم قيمة locale من السياق إذا لم تُزوَّد.useIntlayer
    useDictionaryهو Hook يقوم بتحويل كائن القاموس ويعيد المحتوى للـlocale الحالي. يعالج ترجمات t()، والـenumerations، وما إلى ذلك.useDictionary
    useDictionaryAsyncهو Hook يتعامل مع القواميس غير المتزامنة. يقبل خريطة قواميس معتمدة على Promise ويحلّها للـlocale الحالي.-
    useDictionaryDynamicهوك يتعامل مع القواميس الديناميكية التي تُحمّل بواسطة المفتاح. يستخدم React Suspense داخليًا لحالات التحميل.-
    useLocaleهوك على جهة العميل للحصول على الـlocale الحالية، الـlocale الافتراضية، الـlocales المتاحة، ودالة لتحديث الـlocale.useLocale
    useLocaleBaseHook للحصول على اللغة الحالية وجميع الحقول المتعلقة بها (locale, defaultLocale, availableLocales, setLocale) من السياق.-
    usePathnameخطاف (Hook) يعيد مسار الرابط (pathname) الحالي مع إزالة جزء الإعداد المحلي. يتفاعل مع تنقل المتصفح عبر popstate.usePathname
    useRewriteURLHook على جانب العميل لإدارة إعادة كتابة عناوين URL. إذا وُجدت قاعدة إعادة كتابة للمسار الحالي والlocale، فسيتم تحديث عنوان URL.useRewriteURL
    useI18nهوك يوفر دالة ترجمة t() للوصول إلى محتوى متداخل عبر المفتاح. يحاكي نمط i18next/next-intl.useI18n
    useIntlهوك يوفر كائن Intl مربوط بالـ locale. يقوم بحقن الـ locale الحالي تلقائيًا ويستخدم تخزينًا مؤقتًا محسّنًا.-
    useLocaleStorageهوك يوفر ثبات اللغة في التخزين المحلي أو في الكوكيز. يعيد دوال getter و setter.-
    useLocaleCookieDeprecated. استخدم useLocaleStorage بدلاً منه. هوك يدير ثبات اللغة في الكوكيز.-
    useLoadDynamicخطاف لتحميل القواميس الديناميكية باستخدام React Suspense. يقبل مفتاحًا ووعدًا، ويخزن النتائج في ذاكرة التخزين المؤقت.-
    useIntlayerContextخطاف يوفر قيم سياق عميل Intlayer الحالية (locale, setLocale، إلخ).-
    useHTMLContextHook للوصول إلى تجاوزات مكونات HTML من سياق HTMLProvider.-

    الدوال

    استيراد:

    tsx
    import "react-intlayer";
    الدالةالوصفالوثيقة ذات الصلة
    renderHTMLأداة مستقلة لعرض HTML خارج المكونات.-
    renderMarkdownأداة مستقلة لعرض Markdown خارج المكونات.-
    tدالة ترجمة على جانب العميل تُرجع الترجمة للمحتوى متعدد اللغات المزوَّد. تستخدم لغة السياق إذا لم تُحدد.الترجمة
    getDictionaryيقوم بمعالجة كائنات القاموس ويُعيد المحتوى للـ locale المحددة. يعالج ترجمات t()، enumerations، Markdown، HTML، إلخ.-
    getIntlayerيسترجع قاموسًا بواسطة مفتاحه من التصريح المُولد ويُعيد محتواه للـ locale المحددة. إصدار مُحسّن من getDictionary.-
    setLocaleInStorageيضبط locale في التخزين (local storage أو cookie بناءً على التكوين).-
    setLocaleCookieمُهمل. استخدم setLocaleInStorage بدلاً من ذلك. يضبط locale في cookie.-
    localeInStorageيسترجع الـ locale من التخزين (local storage أو cookie).-
    localeCookieمهمل. استخدم localeInStorage بدلاً منه. يسترجع الـ locale من cookie.-

    المكونات

    استيراد:

    tsx
    import "react-intlayer";

    أو

    tsx
    import "react-intlayer/markdown";
    المكوّنالوصفالمستند المرتبط
    HTMLRendererيعرض محتوى HTML مع مكونات مخصصة.-
    MarkdownProviderمزود لسياق عرض Markdown. يتيح تجاوز المكونات المخصصة لعناصر Markdown.-
    MarkdownRendererيعرض محتوى Markdown باستخدام مكونات مخصصة. يدعم جميع ميزات Markdown القياسية والتركيب الخاص بـ Intlayer.MarkdownRenderer

    الأنواع

    Import:

    tsx
    import "react-intlayer";
    النوعالوصف
    IntlayerNodeنوع يمثل عقدة في شجرة محتوى Intlayer. يستخدم للتعامل مع المحتوى مع ضمان سلامة الأنواع.

    جانب الخادم (react-intlayer/server)

    استيراد:

    tsx
    import "react-intlayer/server";
    التصديرالنوعالوصف
    IntlayerServerProviderComponentمزود لعملية العرض على جانب الخادم (server-side rendering).
    IntlayerServerComponentغلاف على جانب الخادم لمحتوى Intlayer.
    tFunctionنسخة على جانب الخادم من دالة الترجمة.
    useLocaleHookهوك للوصول إلى اللغة (locale) على جانب الخادم.
    useIntlayerHookنسخة على جانب الخادم من useIntlayer.
    useDictionaryHookنسخة على جانب الخادم من useDictionary.
    useI18nHookنسخة على جانب الخادم من useI18n.
    localeFunctionدالة للحصول على الـ locale أو تعيينه على جانب الخادم.
    validatePrefixIntlayerProvider