React Integration: useIntlayer Hook Documentation

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

    استيراد useIntlayer في React

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

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

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

    المعلمات

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

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

    القاموس

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

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

    عرض استخدام الخطاف useIntlayer داخل مكون 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، مما يبسط عملية التوطين ويضمن تناسق المحتوى عبر اللغات المختلفة.

    إذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.

    رابط GitHub للتوثيق