React

Cómo usar Magic Translate en las aplicaciones React.

Instalación

Instala el cliente React para Magic Translate en tu aplicación.

# using npm
npm i @magic-translate/react

# using yarn
yarn add @magic-translate/react

Entonces, envuelve tu aplicación en 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>
);

Si aún no tienes una clave de API, regístrate en Magic Translate para conseguir una.

Ahora puedes usar el componente <T> en cualquier parte de tu aplicación.

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

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

Eso es todo. Tu aplicación ahora se puede traducir a más de 70 idiomas.

Cambiar de idioma

Para cambiar el idioma actual, cambia el language prop del MagicTranslateProvider. Todo tu contenido se traduce automáticamente al nuevo idioma.

Como alternativa, puedes usar el 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>
    </>
  );
};

Cuando usas el useLanguageSwitcher() hook, el language prop del MagicTranslateProvider solo establece el idioma inicial. Cambiar el prop después no tiene ningún efecto.

Ejemplo de proyecto

Puedes encontrar un proyecto de ejemplo en GitHub.