Documentación: Uso avanzado

Uso avanzado

Spanish

Manejo de idiomas de derecha a izquierda

TacoTranslate facilita el soporte de idiomas que se escriben de derecha a izquierda (RTL), como el árabe y el hebreo, en sus aplicaciones React. El manejo adecuado de los idiomas RTL garantiza que su contenido se muestre correctamente a los usuarios que leen de derecha a izquierda.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

También puede usar la función proporcionada isRightToLeftLocaleCode para comprobar el idioma actual fuera de React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

function foo(locale = 'es') {
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	// ...
}

Desactivar la traducción

Para desactivar la traducción de partes específicas de una cadena o para asegurarse de que ciertos segmentos se conserven tal cual, puede usar corchetes cuadrados triples. Esta función es útil para mantener el formato original de nombres, términos técnicos u otros contenidos que no deben traducirse.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

En este ejemplo, la palabra “TacoTranslate” permanecerá sin cambios en la traducción.

Varios proveedores de TacoTranslate

Recomendamos encarecidamente utilizar múltiples proveedores de TacoTranslate en tu aplicación. Esto es útil para organizar tus traducciones y cadenas en diferentes orígenes, como el encabezado, el pie de página o secciones específicas.

Puedes leer más sobre cómo utilizar orígenes aquí.

Los proveedores de TacoTranslate heredan la configuración de cualquier proveedor padre, por lo que no tendrás que repetir ninguna otra configuración.

import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate} from 'tacotranslate/react';

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

function Header() {
	return (
		<TacoTranslate origin="header">
			// ...
		</TacoTranslate>
	);
}

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

export default function App() {
	return (
		<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
			<Header />
			<Menu />
		</TacoTranslate>
	);
}

Sobrescribir el origen o la configuración regional

Además de utilizar varios proveedores TacoTranslate, también puede anular tanto el origen como la configuración regional en los niveles del componente Translate y del hook useTranslation.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

Manejo de la carga

Al cambiar el idioma en el lado del cliente, la obtención de las traducciones puede tardar unos momentos según la conexión del usuario. Puedes mostrar un indicador de carga para mejorar la experiencia del usuario proporcionando retroalimentación visual durante el cambio.

import {useTacoTranslate} from 'tacotranslate/react';

function Component() {
	const {isLoading} = useTacoTranslate();

	return (
		isLoading ? 'Translations are loading...' : null
	);
}

Pluralización

Para manejar la pluralización y mostrar correctamente las etiquetas basadas en el conteo en diferentes idiomas, se considera una buena práctica:

import {Translate, useLocale} from 'tacotranslate/react';

function PhotoCount() {
	const locale = useLocale();
	const count = 1;

	return count === 0 ? (
		<Translate string="You have no photos." />
	) : count === 1 ? (
		<Translate string="You have 1 photo." />
	) : (
		<Translate
			string="You have {{count}} photos."
			variables={{count: count.toLocaleString(locale)}}
		/>
	);
}

Varios idiomas

Para admitir varios idiomas simultáneamente dentro de la misma aplicación, puedes usar varios proveedores de TacoTranslate con diferentes valores de locale como se muestra a continuación:

También puedes anular el locale a nivel del componente o del hook.

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

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

function Spanish() {
	return (
		<TacoTranslate locale="es">
			<Translate string="Hello, world in Spanish!" />
		</TacoTranslate>
	);
}

function Norwegian() {
	return (
		<TacoTranslate locale="no">
			<Translate string="Hello, world in Norwegian!" />
		</TacoTranslate>
	);
}

export default function App() {
	return (
		<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
			<Spanish />
			<Norwegian />
		</TacoTranslate>
	);
}

Uso de identificadores de traducción

Puedes añadir un id al componente Translate para manejar distintas traducciones o significados de la misma cadena. Esto es especialmente útil cuando un mismo texto requiere traducciones diferentes según el contexto. Al asignar IDs únicos, te aseguras de que cada instancia de la cadena se traduzca con precisión según su significado específico.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Por ejemplo, el inicio de sesión del encabezado podría traducirse como “Iniciar sesión”, y el inicio de sesión del pie de página podría traducirse como “Acceder” en español.

Buenas prácticas