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 を変更しても効果はない。

サンプルプロジェクト

GitHubでサンプルプロジェクトを見つけることができる。