Documentación: Uso avanzado

Uso avanzado

Spanish (Mexico)

Manejo de idiomas de derecha a izquierda

TacoTranslate facilita el soporte para idiomas de derecha a izquierda (RTL), como el árabe y el hebreo, en tus aplicaciones React. El manejo adecuado de los idiomas RTL garantiza que tu contenido se muestre correctamente para 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 puedes usar la función proporcionada isRightToLeftLocaleCode para verificar el idioma actual fuera de React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Deshabilitar traducción

Para desactivar la traducción de partes específicas de una cadena o para asegurar que ciertos segmentos se conserven tal cual, puedes usar corchetes triples. Esta función es útil para mantener el formato original de nombres, términos técnicos o cualquier otro contenido que no deba 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.

Múltiples 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 tu encabezado, pie de página o secciones específicas.

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

Los proveedores de TacoTranslate heredan las configuraciones 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 origen o configuración regional

Además de usar múltiples proveedores TacoTranslate, también puedes sobreescribir tanto el origen como la configuración regional en el componente Translate y en los niveles 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 de idioma del lado del cliente, obtener las traducciones puede tomar algunos momentos dependiendo de 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 etiquetas basadas en conteos correctamente en diferentes idiomas, esta es la mejor 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)}}
		/>
	);
}

Múltiples idiomas

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

También puedes sobrescribir el locale a nivel de componente o 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 IDs de traducción

Puedes agregar un id al componente Translate para manejar diferentes traducciones o significados para la misma cadena. Esto es particularmente útil cuando el mismo texto requiere distintas traducciones según el contexto. Al asignar IDs únicos, aseguras que cada instancia de la cadena se traduzca de manera precisa conforme a 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 en el encabezado podría traducirse como “Iniciar sesión”, y el inicio de sesión en el pie de página podría traducirse como “Acceder” en español.

Mejores prácticas