Documentación: Uso de TacoTranslate

Uso de TacoTranslate

Spanish (Mexico)

Traducción de cadenas

Actualmente existen tres formas de traducir cadenas: el componente Translate, el hook useTranslation, o la utilidad translateEntries.

Uso del componente Translate.
Muestra las traducciones dentro de un elemento span, y admite el renderizado de HTML.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

Puedes cambiar el tipo de elemento usando, por ejemplo, as="p" en el componente.

Uso del hook useTranslation.
Devuelve las traducciones como una cadena de texto simple. Útil, por ejemplo, en etiquetas meta.

import {useEffect} from 'react';
import {useTranslation} from 'tacotranslate/react';

function Page() {
	const helloWorld = useTranslation('Hello, world!');

	useEffect(() => {
		alert(helloWorld);
	}, [helloWorld]);

	return (
		<title>{useTranslation('My page title')}</title>
	);
}

Usando la utilidad translateEntries.
Traduce cadenas en el servidor. Potencia tus imágenes de OpenGraph.

import {createEntry, translateEntries} from 'tacotranslate';

async function generateMetadata(locale = 'es') {
	const title = createEntry({string: 'Hello, world!'});
	const description = createEntry({string: 'TacoTranslate on the server'});

	const translations = await translateEntries(
		tacoTranslate,
		{origin: 'opengraph', locale},
		[title, description]
	);

	return {
		title: translations(title),
		description: translations(description)
	};
}

Cuando las cadenas llegan a nuestros servidores, primero las validamos y las guardamos, y luego devolvemos inmediatamente una traducción automática. Aunque las traducciones automáticas suelen ser de menor calidad en comparación con nuestras traducciones por IA, brindan una respuesta inicial rápida.

Al mismo tiempo, iniciamos un trabajo de traducción asíncrono para generar una traducción de IA de alta calidad y de última generación para tu cadena. Una vez que la traducción de IA esté lista, reemplazará a la traducción automática y se enviará cada vez que solicites traducciones de tus cadenas.

Si has traducido manualmente una cadena, esas traducciones tienen prioridad y se devuelven en su lugar.

Uso de orígenes

Los proyectos de TacoTranslate contienen lo que llamamos orígenes. Piénsalos como puntos de entrada, carpetas o grupos para tus cadenas y traducciones.

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

Los orígenes te permiten separar las cadenas en contenedores significativos. Por ejemplo, podrías tener un origen para la documentación y otro para tu página de marketing.

Para un control más granular, podrías configurar orígenes a nivel de componente.

Para lograrlo, considera usar múltiples proveedores de TacoTranslate dentro de tu proyecto.

Ten en cuenta que la misma cadena puede recibir diferentes traducciones en distintos orígenes.

En última instancia, la forma en que separas las cadenas en orígenes depende de ti y de tus necesidades. Sin embargo, ten en cuenta que tener muchas cadenas dentro de un mismo origen puede aumentar los tiempos de carga.

Manejo de variables

Siempre debes usar variables para contenido dinámico, como nombres de usuario, fechas, direcciones de correo electrónico y más.

Las variables en las cadenas de texto se declaran usando llaves dobles, como {{variable}}.

import {Translate} from 'tacotranslate/react';

function Greeting() {
	const name = 'Juan';
	return <Translate string="Hello, {{name}}!" variables={{name}} />;
}

import {useTranslation} from 'tacotranslate/react';

function useGreeting() {
	const name = 'Juan';
	return useTranslation('Hello, {{name}}!', {variables: {name}});
}

Administrar contenido HTML

De forma predeterminada, el componente Translate admite y renderiza contenido HTML. Sin embargo, puedes desactivar este comportamiento estableciendo useDangerouslySetInnerHTML en false.

Se recomienda encarecidamente desactivar el renderizado de HTML al traducir contenido no confiable, como el generado por los usuarios.

Toda la salida siempre se sanitiza con sanitize-html antes de ser renderizada.

import {Translate} from 'tacotranslate/react';

function Page() {
	return (
		<Translate
			string={`
				Welcome to <strong>my</strong> website.
				I’m using <a href="{{url}}">TacoTranslate</a> to translate text.
			`}
			variables={{url: 'https://tacotranslate.com'}}
			useDangerouslySetInnerHTML={false}
		/>
	);
}

El ejemplo anterior se mostrará como texto sin formato.

Renderizado del lado del servidor

Uso de TacoTranslate

Cómo se traducen las cadenas

Uso de orígenes

Manejo de variables

Administrar contenido HTML