React i18n sin claves de traducción

La mayoría de las bibliotecas de React i18n funcionan con claves de traducción. Sustituyes todos los textos de tu aplicación por una clave, guardas un archivo con las traducciones de cada idioma y buscas el texto correcto en tiempo de ejecución. Magic Translate se salta todo eso: escribes el texto en tu propio idioma y se traduce cuando aparece la página.

Cómo funciona el i18n con las claves de traducción

Con una biblioteca basada en claves, un botón simple tiene este aspecto:

// en.json
{ "checkout.button": "Continue to payment" }

// de.json
{ "checkout.button": "Weiter zur Zahlung" }

// Checkout.tsx
<button>{t('checkout.button')}</button>

Cada texto nuevo significa una clave nueva, una entrada en cada archivo de idiomas y una traducción para cada idioma. Cuando cambias el texto en inglés, los demás idiomas quedan anticuados hasta que alguien los vuelva a traducir.

El mismo botón sin teclas

Con Magic Translate, el texto se queda donde está:

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

<button>
  <T>Continue to payment</T>
</button>

No hay archivos de idiomas que mantener. Cuando cambias el texto, la nueva versión se traduce la próxima vez que se muestre y la traducción se almacena en caché a partir de ese momento.

Para empezar

1. Regístrate en Magic Translate y consigue tu clave de API. El plan gratuito incluye 5000 caracteres al mes.
2. Instala el cliente y empaqueta tu aplicación en el MagicTranslateProvider, como se muestra en la guía React.
3. Envuelve tu texto en <T>. Para props y los atributos, usa el useT hook.

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

const App = () => (
  <MagicTranslateProvider apiKey="<your-api-key>" language={Language.FR}>
    <h1>
      <T>Welcome to our shop</T>
    </h1>
  </MagicTranslateProvider>
);

Si renderizas en el servidor, usa React SSR en su lugar, para que los motores de búsqueda y los usuarios obtengan el HTML completamente traducido.

Cuando las claves de traducción siguen siendo la mejor opción

La traducción automática es buena, pero no la revisa nadie. Si un traductor debe aprobar cada palabra de tu aplicación, por ejemplo, para textos legales o médicos, una biblioteca basada en claves con traducciones humanas te da ese control. Muchas aplicaciones combinan ambas cosas: Magic Translate en la mayor parte de la interfaz y textos revisados cuando es importante.

Preguntas frecuentes

¿La traducción es lo suficientemente rápida?

La primera traducción de un texto puede tardar unos segundos. Después de eso, se almacena en caché y tarda de 100 a 300 ms. Con React SSR, las traducciones se realizan en el servidor, por lo que los usuarios no las esperan nunca.

¿Cuánto cuesta?

El uso se cuenta en caracteres traducidos al mes y el texto que ya estaba traducido no se vuelve a contar. Consulta cómo se calcula el uso y los precios.

¿Qué idiomas están disponibles?

Más de 70. Consulta la lista completa de idiomas compatibles.