React

Как использовать Magic Translate в приложениях React.

инсталляция

Установите клиент React для 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 языков.

Смена языков

Чтобы изменить текущий язык, измените language prop в поле MagicTranslateProvider. Весь ваш контент автоматически переводится на новый язык.

В качестве альтернативы вы можете использовать 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 буква language prop из MagicTranslateProvider задает только исходный язык. Последующее изменение prop не имеет никакого эффекта.

Пример проекта

Пример проекта можно найти на GitHub.