Magic Translate vs. react-intl
react-intl forma parte de FormatJS. Da formato a los mensajes, las fechas y los números con la sintaxis de mensajes ICU y tú proporcionas las traducciones para cada idioma. Magic Translate traduce el texto de tus componentes directamente, por lo que no escribes ni mantienes ninguna traducción.
De un vistazo
| Magic Translate | react-intl | |
|---|---|---|
| Cómo escribes el texto | Tus propias palabras, envueltas en <T> | <FormattedMessage> con un identificador y un mensaje predeterminado |
| Traducciones | Traducción automática, creada automáticamente | Extraes los mensajes y los traduces |
| Archivos de mensajes | Ninguna | Un archivo por idioma |
| Fechas y números | Usa las API Intl del navegador | Componentes integrados y sintaxis ICU |
| Procesamiento de servidores | Componentes del servidor React y Next.js | Sí, con configuración adicional |
| Precio | Plan gratuito, luego planes mensuales según el uso | De código abierto y gratis |
En qué se diferencia el código
Con react-intl, cada mensaje tiene un identificador y las traducciones están en archivos distintos:
import { FormattedMessage } from 'react-intl';const Welcome = () => (<FormattedMessage id="home.welcome" defaultMessage="Welcome back!" />);// Then extract the messages, translate them for every language// and load the right file when the app starts.
Con Magic Translate, escribes el mensaje una vez:
import { T } from '@magic-translate/react';const Welcome = () => <T>Welcome back!</T>;
Cuándo elegir Magic Translate
- Quieres que tu aplicación esté en muchos idiomas sin un flujo de trabajo de traducción.
- Tus textos cambian a menudo y quieres que todos los idiomas estén actualizados.
- Quieres nuevos idiomas sin pagar ni esperar a los traductores.
Cuándo elegir react-intl
- Necesitas la sintaxis del mensaje ICU para plurales y géneros complejos.
- Tus traducciones deben estar escritas o revisadas por personas.
- Quieres una biblioteca gratuita y de código abierto sin servicio externo.
Usar ambos
Los dos funcionan bien juntos. Usa las API react-intl o Intl para formatear fechas, números y monedas, y Magic Translate para traducir el texto en torno a ellas.
¿Estás listo para probarlo? Sigue la guía de inicio para traducir tu primer componente en cinco minutos.