React

Come usare Magic Translate nelle app React.

Installazione

Installa il client React per Magic Translate nella tua app.

# using npm
npm i @magic-translate/react

# using yarn
yarn add @magic-translate/react

Quindi racchiudi la tua app in un <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 non hai ancora una chiave API, iscriviti a Magic Translate per ottenerne una.

Ora puoi usare il componente <T> ovunque nella tua app.

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

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

Questo è tutto. La tua app ora può essere tradotta in oltre 70 lingue.

Cambiare lingua

Per cambiare la lingua corrente, cambia il language prop del MagicTranslateProvider. Tutti i tuoi contenuti vengono tradotti automaticamente nella nuova lingua.

In alternativa, puoi usare 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 usi il useLanguageSwitcher() hook, il language prop del MagicTranslateProvider imposta solo la lingua iniziale. Cambiare prop in seguito non ha alcun effetto.

Esempio di progetto

Puoi trovare un progetto di esempio su GitHub.