React

Wie benutzt man Magic Translate in React-Apps.

Installation

Installiere den React-Client für Magic Translate in deiner App.

# using npm
npm i @magic-translate/react

# using yarn
yarn add @magic-translate/react

Dann packe deine App in ein <MagicTranslateProvider>.

import { MagicTranslateProvider, Language } from '@magic-translate/react';

const MyApp = () => (
  <MagicTranslateProvider
    apiKey="<your-api-key>"
    language={Language.DE} // any supported language
  >
    {/* your app */}
  </MagicTranslateProvider>
);

Falls du noch keinen API-Schlüssel hast, melde dich für Magic Translate an, um einen zu erhalten.

Jetzt kannst du die Komponente <T> überall in deiner App verwenden.

import { T } from '@magic-translate/react';

const SomeComponent = () => <T>Please translate me!</T>;

Das ist es. Deine App kann jetzt in über 70 Sprachen übersetzt werden.

Sprachen ändern

Um die aktuelle Sprache zu ändern, ändere language prop von MagicTranslateProvider. All deine Inhalte werden automatisch in die neue Sprache übersetzt.

Alternativ kannst du useLanguageSwitcher() hook verwenden.

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>
    </>
  );
};

Wenn du useLanguageSwitcher() hook verwendest, legt language prop von MagicTranslateProvider nur die Ausgangssprache fest. Die prop danach zu ändern, hat keine Wirkung.

Beispielprojekt

Du findest ein Beispielprojekt auf GitHub.