إنشاء:2026-01-21آخر تحديث:2026-01-21

    حزمة react-intlayer

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

    التثبيت

    npm install react-intlayer

    الصادرات

    الموفرون

    استيراد:

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

    هوكس

    استيراد:

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

    الدوال

    استيراد:

    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. -

    المكونات

    استيراد:

    import "react-intlayer";

    أو

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

    الأنواع

    Import:

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

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

    استيراد:

    import "react-intlayer/server";
    التصدير النوع الوصف
    IntlayerServerProvider Component مزود لعملية العرض على جانب الخادم (server-side rendering).
    IntlayerServer Component غلاف على جانب الخادم لمحتوى Intlayer.
    t Function نسخة على جانب الخادم من دالة الترجمة.
    useLocale Hook هوك للوصول إلى اللغة (locale) على جانب الخادم.
    useIntlayer Hook نسخة على جانب الخادم من useIntlayer.
    useDictionary Hook نسخة على جانب الخادم من useDictionary.
    useI18n Hook نسخة على جانب الخادم من useI18n.
    locale Function دالة للحصول على الـ locale أو تعيينه على جانب الخادم.
    لماذا Intlayer؟