Localización sin esfuerzo para aplicaciones React

Cómo funciona

Instala el paquete TacoTranslate mediante npm:

npm install tacotranslate

Cuando tengas el módulo instalado, necesitarás crear una cuenta de TacoTranslate, un proyecto de traducción y las llaves API asociadas. Crea una cuenta aquí. Es gratis y no requiere que agregues una tarjeta de crédito.

Dentro de la interfaz de la aplicación TacoTranslate, crea un proyecto y navega a la pestaña de claves API. Crea una clave read y una clave read/write. Las guardaremos como variables de entorno. La clave read es lo 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 necesitarás agregar dos variables de entorno más: TACOTRANSLATE_DEFAULT_LOCALE y TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: El código de localización predeterminado de respaldo. En este ejemplo, lo configuraremos en en para inglés.
• TACOTRANSLATE_ORIGIN: La “carpeta” donde se almacenarán tus cadenas, como la URL de tu sitio web. Lee más 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 nunca filtrar la clave API secreta read/write en entornos de producción del lado del cliente.

Configurando TacoTranslate

Inicializa TacoTranslate en tu aplicación React envolviendo tu aplicación en 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 lugar dentro 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 recolección de cadenas, ahorrándote un 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 fácilmente soporte para nuevos idiomas a medida que tu aplicación y base de usuarios crecen.

¡Comienza hoy!

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

Recomendamos tener un entorno de staging cerrado y seguro donde puedas probar tu aplicación en producción, agregando nuevas cadenas antes de lanzarla en vivo. Esto prevendrá que alguien robe tu clave API secreta y, potencialmente, que se sobrecargue tu proyecto de traducción al agregar cadenas no autorizadas.

Asegúrate de revisar los ejemplos completos en nuestro perfil de GitHub. Si encuentras algún problema, no dudes en contactarnos, y estaremos más que felices de ayudarte.

TacoTranslate te permite localizar automáticamente tus aplicaciones React rápida y fácilmente en cualquier idioma. ¡Traduce gratis!