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

    تكامل React: توثيق هوك useIntlayer

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

    استيراد useIntlayer في React

    يمكن دمج هوك useIntlayer في تطبيقات React عن طريق استيراده بناءً على السياق:

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

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

    المعاملات

    يقبل الـ hook معاملين:

    1. key: مفتاح القاموس لاسترجاع المحتوى المحلي.
    2. locale (اختياري): اللغة المطلوبة. القيمة الافتراضية هي لغة السياق إذا لم يتم تحديدها.

    القاموس

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

    مثال على الاستخدام في React

    عرض استخدام الـ useIntlayer hook داخل مكون React:

    src/app.tsx
    import type { FC } from "react";import { ClientComponentExample, ServerComponentExample } from "@components";import { IntlayerProvider } from "react-intlayer";import { useIntlayer, IntlayerServerProvider } from "react-intlayer/server";import { Locales } from "intlayer";const App: FC<{ locale: Locales }> = ({ locale }) => {  const content = useIntlayer("homepage", locale);  return (    <>      <p>{content.introduction}</p>      <IntlayerProvider locale={locale}>        <ClientComponentExample />      </IntlayerProvider>      <IntlayerServerProvider locale={locale}>        <ServerComponentExample />      </IntlayerServerProvider>    </>  );};
    src/components/ComponentExample.tsx
    import type { FC } from "react";import { useIntlayer } from "react-intlayer";const ComponentExample: FC = () => {  const content = useIntlayer("component-example");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );};
    src/components/ServerComponentExample.tsx
    import { useIntlayer } from "react-intlayer/server";const ServerComponentExample = () => {  const content = useIntlayer("server-component");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );};

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

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

    jsx
    <button title={content.buttonTitle.value}>{content.buttonText}</button>

    موارد إضافية

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

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

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

    • 5.5.10 - 2025-06-29: بداية السجل
    تلقي إشعارات حول الإصدارات القادمة من Intlayer