Traducción de cadenas

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

Usando el Translate componente.
Muestra las traducciones dentro de un elemento span, y admite renderizar HTML.

import {Translate} from 'tacotranslate/react';

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

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

Usando el useTranslation hook.
Devuelve las traducciones como una cadena 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>
	);
}

Uso de la utilidad translateEntries.
Traduce las cadenas en el lado del 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)
	};
}

Cómo se traducen las cadenas

Cuando las cadenas llegan a nuestros servidores, primero las validamos y las guardamos; a continuación devolvemos de inmediato una traducción automática. Aunque las traducciones automáticas suelen ser de menor calidad que nuestras traducciones por IA, proporcionan una respuesta inicial rápida.

Simultáneamente, 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á la traducción automática y se enviará cada vez que solicites traducciones para 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.

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 los orígenes a nivel de componente.

Para lograrlo, considere usar varios proveedores de TacoTranslate dentro de su proyecto.

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

En última instancia, la forma en que separe las cadenas en orígenes depende de usted y de sus necesidades. Sin embargo, tenga en cuenta que tener muchas cadenas en 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 se declaran usando llaves dobles, como {{variable}}.

Manejo de contenido HTML

Por defecto, el componente Translate admite y renderiza contenido HTML. Sin embargo, puedes optar por no usar este comportamiento estableciendo useDangerouslySetInnerHTML en false.

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

Todas las salidas siempre se sanitizan con sanitize-html antes de ser renderizadas.

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 renderizará como texto sin formato.