React
كيفية استخدام Magic Translate في تطبيقات React.
التثبيت
ثبّت عميل React لـ Magic Translate في تطبيقك.
# using npmnpm i @magic-translate/react# using yarnyarn add @magic-translate/react
ثم قم بتغليف التطبيق الخاص بك في <MagicTranslateProvider>.
import { MagicTranslateProvider, Language } from '@magic-translate/react';const MyApp = () => (<MagicTranslateProviderapiKey="<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، يقومlanguageprop منMagicTranslateProviderبتعيين اللغة الأولية فقط. تغيير prop بعد ذلك ليس له أي تأثير.
مشروع مثال
يمكنك العثور على مثال لمشروع على GitHub.