react-intlayer: حزمة NPM لتدويل (i18n) تطبيق React

    Intlayer هي مجموعة من الحزم المصممة خصيصًا لمطوري JavaScript. وهي متوافقة مع أطر العمل مثل React وExpress.js.

    حزمة react-intlayer تتيح لك تدويل تطبيق React الخاص بك. توفر مزودي السياق وخطافات لتدويل React.

    لماذا تدويل تطبيق React الخاص بك؟

    تدويل تطبيق React الخاص بك أمر ضروري لخدمة جمهور عالمي بفعالية. يتيح لتطبيقك تقديم المحتوى والرسائل بلغة المستخدم المفضلة. تعزز هذه القدرة تجربة المستخدم وتوسع نطاق تطبيقك من خلال جعله أكثر وصولًا وملاءمة للأشخاص من خلفيات لغوية مختلفة.

    لماذا دمج Intlayer؟

    • إدارة المحتوى المدعومة بـ JavaScript: استغل مرونة JavaScript لتعريف وإدارة المحتوى بكفاءة.
    • بيئة آمنة من الأخطاء: استفد من TypeScript لضمان أن تكون جميع تعريفات المحتوى دقيقة وخالية من الأخطاء.
    • ملفات محتوى متكاملة: احتفظ بترجماتك قريبة من مكوناتها ذات الصلة، مما يعزز القابلية للصيانة والوضوح.

    التثبيت

    قم بتثبيت الحزمة المطلوبة باستخدام مدير الحزم المفضل لديك:

    bash
    npm install react-intlayer

    مثال على الاستخدام

    مع Intlayer، يمكنك تعريف المحتوى الخاص بك بطريقة منظمة في أي مكان في قاعدة الكود الخاصة بك.

    بشكل افتراضي، يقوم Intlayer بمسح الملفات ذات الامتداد .content.{ts,tsx,js,jsx,mjs,cjs}.

    يمكنك تعديل الامتداد الافتراضي عن طريق تعيين خاصية contentDir في ملف التكوين.

    bash
    .├── intlayer.config.ts└── src    └── components        ├── Component1        │   ├── index.content.ts        │   └── index.tsx        └── Component2            ├── index.content.ts            └── index.tsx

    تعريف المحتوى الخاص بك

    react-intlayer مصمم للعمل مع حزمة intlayer. intlayer هي حزمة تتيح لك تعريف المحتوى الخاص بك في أي مكان في الكود الخاص بك. تقوم بتحويل تعريفات المحتوى متعدد اللغات إلى قواميس منظمة تتكامل بسلاسة مع تطبيقك.

    إليك مثال على تعريف المحتوى:

    tsx
    import { t, type Dictionary } from "intlayer";const component1Content = {  key: "component-1",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",      ar: "مرحبًا بالعالم",    }),    numberOfCar: enu({      "<-1": "أقل من ناقص سيارة واحدة",      "-1": "ناقص سيارة واحدة",      "0": "لا سيارات",      "1": "سيارة واحدة",      ">5": "بعض السيارات",      ">19": "الكثير من السيارات",    }),  },} satisfies Dictionary;export default component1Content;

    استخدام المحتوى في الكود الخاص بك

    بمجرد تعريف المحتوى الخاص بك، يمكنك استخدامه في الكود الخاص بك. إليك مثال على كيفية استخدام المحتوى في مكون React:

    src/components/Component1Example.tsx
    "use client";import type { FC } from "react";import { useIntlayer } from "react-intlayer";export const Component1Example: FC = () => {  const { myTranslatedContent } = useIntlayer("component-1"); // إنشاء تعريف المحتوى المرتبط  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

    إتقان تدويل تطبيق React الخاص بك

    يوفر Intlayer العديد من الميزات لمساعدتك في تدويل تطبيق React الخاص بك.

    لتعلم المزيد عن هذه الميزات، راجع دليل تدويل React (i18n) مع Intlayer و Vite و React لتطبيق Vite و React، أو دليل تدويل React (i18n) مع Intlayer و React (CRA) لتطبيق React Create App.

    الوظائف التي توفرها حزمة react-intlayer

    توفر حزمة react-intlayer أيضًا بعض الوظائف لمساعدتك في تدويل تطبيقك.

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

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