React

How to use Magic Translate in React apps.

Installation

Install the React client for Magic Translate in your app.

# using npm
npm i @magic-translate/react

# using yarn
yarn add @magic-translate/react

Then wrap your app in a <MagicTranslateProvider>.

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

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

If you don't have an API key yet, sign up for Magic Translate to get one.

Now you can use the <T> component anywhere in your app.

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

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

That's it. Your app can now be translated into over 70 languages.

Changing languages

To change the current language, change the language prop of the MagicTranslateProvider. All your content is translated into the new language automatically.

Alternatively, you can use the 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>
    </>
  );
};

When you use the useLanguageSwitcher() hook, the language prop of the MagicTranslateProvider only sets the initial language. Changing the prop afterwards has no effect.

Example project

You can find an example project on GitHub.