التوثيق

React

كيفية استخدام Magic Translate في تطبيقات React.

التثبيت

ثبّت عميل React لـ Magic Translate في تطبيقك.

# using npm
npm i @magic-translate/react
# using yarn
yarn add @magic-translate/react

ثم قم بتغليف التطبيق الخاص بك في <MagicTranslateProvider>.

import { MagicTranslateProvider, Language } from '@magic-translate/react';
const MyApp = () => (
<MagicTranslateProvider
apiKey="<your-api-key>"
language={Language.DE} // any supported language
>
{/* your app */}
</MagicTranslateProvider>
);

إذا لم يكن لديك مفتاح API حتى الآن، فقم بالتسجيل في Magic Translate للحصول على واحد.

يمكنك الآن استخدام المكون <T> في أي مكان في تطبيقك.

import { T } from '@magic-translate/react';
const SomeComponent = () => <T>Please translate me!</T>;

هذا كل شيء. يمكن الآن ترجمة تطبيقك إلى أكثر من 70 لغة.

تغيير اللغات

لتغيير اللغة الحالية، قم بتغيير language prop من MagicTranslateProvider. تتم ترجمة كل المحتوى الخاص بك إلى اللغة الجديدة تلقائيًا.

بدلاً من ذلك، يمكنك استخدام useLanguageSwitcher() hook.

import { useLanguageSwitcher } from '@magic-translate/react';
const SomeComponent = () => {
const { setLanguage, currentLanguage } = useLanguageSwitcher();
return (
<>
<div>Current language is: {currentLanguage}</div>
<button onClick={() => setLanguage('de')}>German</button>
</>
);
};

عند استخدام useLanguageSwitcher() hook، يقوم language prop من MagicTranslateProvider بتعيين اللغة الأولية فقط. تغيير prop بعد ذلك ليس له أي تأثير.

مشروع مثال

يمكنك العثور على مثال لمشروع على GitHub.