React

Comment utiliser Magic Translate dans les apps React.

Installation

Installe le client React pour Magic Translate dans ton application.

# using npm
npm i @magic-translate/react

# using yarn
yarn add @magic-translate/react

Puis ajoute un <MagicTranslateProvider> à ton application.

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

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

Si tu n'as pas encore de clé API, inscris-toi à Magic Translate pour en obtenir une.

Tu peux désormais utiliser le composant <T> n'importe où dans ton application.

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

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

C'est ça. Ton application peut désormais être traduite dans plus de 70 langues.

Changer de langue

Pour changer la langue actuelle, change le language prop du MagicTranslateProvider. Tout ton contenu est traduit automatiquement dans la nouvelle langue.

Sinon, tu peux utiliser le 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>
    </>
  );
};

Quand tu utilises le useLanguageSwitcher() hook, le language prop du MagicTranslateProvider définit uniquement la langue initiale. Changer le prop par la suite n'a aucun effet.

Exemple de projet

Tu peux trouver un exemple de projet sur GitHub.