La mejor solución para la internacionalización (i18n) en aplicaciones de React

Cómo funciona

Instala el paquete TacoTranslate vía npm:

npm install tacotranslate

Una vez que hayas instalado el módulo, deberás crear una cuenta de TacoTranslate, un proyecto de traducción y las claves API asociadas. Crea una cuenta aquí. Es gratis y no requiere que agregues una tarjeta de crédito.

En la interfaz de la aplicación TacoTranslate, crea un proyecto y navega a la pestaña de claves de la API. Crea una clave read y una read/write. Las guardaremos como variables de entorno. La clave read es la que llamamos public y la clave read/write es secret. Por ejemplo, podrías agregarlas a un archivo .env en la raíz de tu proyecto.

También deberás agregar dos variables de entorno más: TACOTRANSLATE_DEFAULT_LOCALE y TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: El código de configuración regional predeterminada. En este ejemplo, lo estableceremos en en para inglés.
• TACOTRANSLATE_ORIGIN: La “carpeta” donde se almacenarán tus cadenas, como la URL de tu sitio web. Obtén más información sobre los orígenes aquí.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Asegúrate de no filtrar nunca la clave API secreta read/write en entornos de producción del lado del cliente.

Configuración de TacoTranslate

Inicializa TacoTranslate en tu aplicación React envolviendo tu aplicación con el proveedor de contexto de TacoTranslate:

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

¡Ahora puedes usar el componente Translate en cualquier parte de tu aplicación para mostrar texto traducido! Asegúrate de consultar nuestra documentación para obtener más información y guías de implementación específicas para tu configuración.

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

Beneficios de usar TacoTranslate

• Ahorro de tiempo: Automatiza el tedioso proceso de localización y la recolección de cadenas, ahorrándote tiempo valioso.
• Rentable: Reduce la necesidad de traducciones manuales, disminuyendo tus costos de localización.
• Mayor precisión: Las traducciones impulsadas por IA garantizan resultados contextualmente precisos y de alta calidad.
• Solución escalable: Agrega soporte para nuevos idiomas fácilmente a medida que tu aplicación y tu base de usuarios crecen.

¡Comienza hoy!

Tu aplicación React se traducirá automáticamente cuando agregues cualquier cadena a un componente Translate. Ten en cuenta que solo los entornos con permisos read/write en la clave de la API podrán crear nuevas cadenas para traducir.

Recomendamos contar con un entorno de staging cerrado y seguro donde puedas probar tu aplicación de producción, agregando nuevas cadenas antes de ponerla en línea. Esto evitará que alguien robe tu clave secreta de la API y, potencialmente, que infle tu proyecto de traducción al añadir cadenas no autorizadas.

Be sure to check out the complete examples over at our GitHub profile. If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Translate for free!