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

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

استيراد useI18n في React

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

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

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

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

  const { useI18n } = require("react-intlayer"); // استخدم في مكونات React على جانب العميل

• مكونات الخادم:

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

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

  const { useI18n } = require("react-intlayer/server"); // استخدم في مكونات React على جانب الخادم

المعاملات

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

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

القاموس

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

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

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

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>
    </>
  );
};

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>
  );
};

import { useI18n } from "react-intlayer/server";

const ServerComponentExample = () => {
  const t = useI18n("server-component");

  return (
    <div>
      <h1>{t("title")}</h1> {/* عرض العنوان */}
      <p>{t("description")}</p> {/* عرض الوصف */}
    </div>
  );
};

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

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

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

موارد إضافية

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

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

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

• 6.0.0 - 2025-06-29: الكتابة الأولية لتوثيق الخطاف useI18n