Uso avanzado
Manejo de idiomas de derecha a izquierda
TacoTranslate facilita el soporte de idiomas de derecha a izquierda (RTL), como el árabe y el hebreo, en tus aplicaciones React. Un manejo adecuado de los idiomas RTL garantiza que tu 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 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';
// ...
}
Desactivar la traducción
Para desactivar la traducción de partes específicas de una cadena o para asegurarte de que ciertos segmentos se conserven tal cual, puedes usar corchetes cuadrados 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 TacoTranslate
proveedores en su aplicación. Esto es útil para organizar sus traducciones y cadenas en diferentes orígenes, como el encabezado, el pie de página o secciones específicas.
Puedes leer más sobre el uso de orígenes aquí.
Los proveedores de TacoTranslate
heredan la configuración de cualquier proveedor principal, 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>
);
}
Anular origen o configuración regional
Además de usar múltiples proveedores TacoTranslate
, también puedes sobrescribir 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 del estado de carga
Al cambiar el idioma en el lado del cliente, la obtención de las traducciones puede tardar unos 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 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 al mismo tiempo en la misma aplicación, puedes usar varios 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 de 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 de la misma cadena. Esto es particularmente útil cuando el mismo texto requiere traducciones distintas según el contexto. Al asignar identificadores ú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 del pie de página podría traducirse como “Acceder” al español.