React

Jak korzystać z Magic Translate w aplikacjach React.

Instalacja

Zainstaluj klienta React dla Magic Translate w swojej aplikacji.

# using npm
npm i @magic-translate/react

# using yarn
yarn add @magic-translate/react

Następnie zawiń swoją aplikację w <MagicTranslateProvider>.

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

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

Jeśli nie masz jeszcze klucza API, zarejestruj się w Magic Translate, aby go otrzymać.

Teraz możesz używać komponentu <T> w dowolnym miejscu aplikacji.

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

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

To wszystko. Aplikację można teraz przetłumaczyć na ponad 70 języków.

Zmiana języków

Aby zmienić bieżący język, zmień language prop w MagicTranslateProvider. Wszystkie treści są automatycznie tłumaczone na nowy język.

Alternatywnie możesz użyć 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>
    </>
  );
};

Kiedy używasz useLanguageSwitcher() hook, language prop MagicTranslateProvider ustawia tylko język początkowy. Zmiana prop później nie przynosi żadnego skutku.

Przykładowy projekt

Przykładowy projekt można znaleźć na GitHub.