دستاویزات

React

React ایپس میں Magic Translate کا استعمال کیسے کریں۔

تنصیب

اپنی ایپ میں Magic Translate کے لئے React کلائنٹ انسٹال کریں۔

# 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 سے زیادہ زبانوں میں ترجمہ کیا جاسکتا ہے۔

زبانیں تبدیل کرنا

موجودہ زبان کو تبدیل کرنے کے لئے، MagicTranslateProvider کے language prop کو تبدیل کریں۔ آپ کے تمام مواد کا خود بخود نئی زبان میں ترجمہ کیا جاتا ہے۔

متبادل کے طور پر، آپ 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 استعمال کرتے ہیں تو، MagicTranslateProvider کا language prop صرف ابتدائی زبان مقرر کرتا ہے۔ اس کے بعد prop کو تبدیل کرنے کا کوئی اثر نہیں پڑتا ہے۔

مثال پروجیکٹ

آپ گٹ ہب پر ایک مثال پروجیکٹ تلاش کرسکتے ہیں۔

پچھلاشروع کرنااگلا<T> جزو