दस्तावेज़ीकरण

React

रिएक्ट ऐप्स में Magic Translate का इस्तेमाल कैसे करें।

इंस्टालेशन

अपने ऐप में 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 से ज़्यादा भाषाओं में अनुवाद किया जा सकता है।

भाषाएं बदलना

मौजूदा भाषा बदलने के लिए, 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 को बाद में बदलने से कोई असर नहीं पड़ता।

प्रोजेक्ट का उदाहरण

तुम्हेंं GitHub पर एक उदाहरण प्रोजेक्ट मिल सकता है।

पिछलाशुरू किया जा रहा हैअगला<T> कॉम्पोनेन्ट