Documentación: Uso de TacoTranslate

Usando TacoTranslate

Spanish

Traducción de cadenas

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

Usando el componente Translate.
Genera traducciones dentro de un elemento span, y soporta la renderización 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.

Usando el 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 lado del servidor. Potencia tus imágenes 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 guardamos, luego devolvemos inmediatamente una traducción automática. Aunque las traducciones automáticas suelen ser de menor calidad en comparación con nuestras traducciones de IA, proporcionan una respuesta inicial rápida.

Simultáneamente, iniciamos un trabajo de traducción asincrónica para generar una traducción de alta calidad y de última generación mediante IA para tu cadena. Una vez que la traducción con 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.

Utilizando 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 le permiten separar cadenas en contenedores significativos. Por ejemplo, podría tener un origen para la documentación y otro para su página de marketing.

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

Para lograr esto, considere usar múltiples proveedores de TacoTranslate dentro de su proyecto.

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

En última instancia, cómo 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 solo 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 dobles corchetes, 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}});
}

Gestión de contenido HTML

Por defecto, el componente Translate soporta y renderiza contenido HTML. Sin embargo, puedes optar por no usar este comportamiento configurando useDangerouslySetInnerHTML a false.

Se recomienda encarecidamente desactivar la renderización de HTML al traducir contenido no confiable, como contenido generado por usuarios.

Todo el contenido de salida siempre se sanitiza con sanitize-html antes de ser renderizado.

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.

Representación del lado del servidor

Usando TacoTranslate

Cómo se traducen las cadenas

Utilizando orígenes

Manejo de variables

Gestión de contenido HTML