React

Como usar Magic Translate em aplicativos React.

Instalação

Instale o cliente React para Magic Translate em seu aplicativo.

# using npm
npm i @magic-translate/react

# using yarn
yarn add @magic-translate/react

Em seguida, envolva seu aplicativo em um <MagicTranslateProvider>.

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

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

Se você ainda não tem uma chave de API, inscreva-se no Magic Translate para obter uma.

Agora você pode usar o componente <T> em qualquer lugar do seu aplicativo.

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

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

É isso mesmo. Seu aplicativo agora pode ser traduzido para mais de 70 idiomas.

Alterando idiomas

Para alterar o idioma atual, altere o language prop do MagicTranslateProvider. Todo o seu conteúdo é traduzido para o novo idioma automaticamente.

Como alternativa, você pode usar o 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>
    </>
  );
};

Quando você usa o useLanguageSwitcher() hook, o language prop do MagicTranslateProvider define apenas o idioma inicial. Alterar o prop posteriormente não tem efeito.

Exemplo de projeto

Você pode encontrar um exemplo de projeto no GitHub.