تلقي إشعارات حول الإصدارات القادمة من Intlayer
    إنشاء:2024-08-11آخر تحديث:2025-06-29

    تكامل React: توثيق خطاف useI18n

    يوفر هذا القسم إرشادات مفصلة حول كيفية استخدام خطاف useI18n داخل تطبيقات React، مما يتيح تعريب المحتوى بكفاءة.

    استيراد useI18n في React

    يمكن استيراد خطاف useI18n ودمجه في تطبيقات React حسب السياق كما يلي:

    • مكونات العميل:

      typescript
      import { useI18n } from "react-intlayer"; // استخدم في مكونات React على جانب العميل
    • مكونات الخادم:

    المعاملات

    يقبل هذا الخطاف معاملين:

    1. namespace: مساحة أسماء القاموس لتحديد نطاق مفاتيح الترجمة.
    2. locale (اختياري): اللغة المطلوبة. إذا لم يتم تحديدها، سيتم استخدام لغة السياق كافتراضي.

    القاموس

    يجب إعلان جميع مفاتيح القاموس داخل ملفات إعلان المحتوى لتعزيز سلامة النوع ومنع الأخطاء. يمكن العثور على تعليمات التكوين هنا.

    أمثلة الاستخدام في React

    أمثلة على استخدام الخطاف useI18n داخل مكونات React:

    src/App.tsx
    import type { FC } from "react";import { ClientComponentExample, ServerComponentExample } from "@components";import { IntlayerProvider } from "react-intlayer";import { useI18n, IntlayerServerProvider } from "react-intlayer/server";import { Locales } from "intlayer";const App: FC<{ locale: Locales }> = ({ locale }) => {  const t = useI18n("home-page", locale);  return (    <>      <p>{t("introduction")}</p>      <IntlayerProvider locale={locale}>        <ClientComponentExample />      </IntlayerProvider>      <IntlayerServerProvider locale={locale}>        <ServerComponentExample />      </IntlayerServerProvider>    </>  );};
    src/components/ComponentExample.tsx
    import type { FC } from "react";import { useI18n } from "react-intlayer";const ComponentExample: FC = () => {  const t = useI18n("component-example");  return (    <div>      <h1>{t("title")}</h1> {/* عرض العنوان */}      <p>{t("description")}</p> {/* عرض الوصف */}    </div>  );};
    src/components/ServerComponentExample.tsx
    import { useI18n } from "react-intlayer/server";const ServerComponentExample = () => {  const t = useI18n("server-component");  return (    <div>      <h1>{t("title")}</h1> {/* عرض العنوان */}      <p>{t("description")}</p> {/* عرض الوصف */}    </div>  );};

    التعامل مع السمات

    عند تعريب السمات، قم بالوصول إلى قيم الترجمة بشكل مناسب:

    jsx
    <!-- بالنسبة لسمات الوصول (مثل aria-label)، استخدم .value لأن السلاسل النصية البحتة مطلوبة --><button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>

    موارد إضافية

    • محرر Intlayer المرئي: للحصول على تجربة إدارة محتوى أكثر سهولة وبديهية، راجع توثيق المحرر المرئي هنا.

    يغطي هذا القسم بشكل خاص دمج الخطاف useI18n في تطبيقات React، مما يبسط عملية التعريب ويضمن اتساق المحتوى عبر اللغات المختلفة.

    تاريخ التوثيق

    • 6.0.0 - 2025-06-29: الكتابة الأولية لتوثيق الخطاف useI18n
    تلقي إشعارات حول الإصدارات القادمة من Intlayer