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 { type DeclarationContent, t } from "intlayer";const component1Content = {  key: "component-1",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),    numberOfCar: enu({      "<-1": "Less than minus one car",      "-1": "Minus one car",      "0": "No cars",      "1": "One car",      ">5": "Some cars",      ">19": "Many cars",    }),  },} satisfies DeclarationContent;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) لتطبيق Create React.

    الوظائف المقدمة من حزمة react-intlayer

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

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

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