Ús avançat
Gestió de llengües de dreta a esquerra
TacoTranslate facilita el suport de llengües de dreta a esquerra (RTL), com l’àrab i l’hebreu, a les vostres aplicacions React. El tractament correcte de les llengües RTL garanteix que el vostre contingut es mostri correctament per als usuaris que llegeixen de dreta a esquerra.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
També podeu utilitzar la funció proporcionada isRightToLeftLocaleCode
per comprovar l'idioma actual fora de React.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Desactivar la traducció
Per desactivar la traducció de parts específiques d’una cadena o per assegurar que certs segments es mantinguin tal qual, podeu utilitzar les triple claus quadrades. Aquesta funció és útil per mantenir el format original de noms, termes tècnics o qualsevol altre contingut que no s’hauria de traduir.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
En aquest exemple, la paraula “TacoTranslate” es mantindrà sense canviar en la traducció.
Diversos proveïdors de TacoTranslate
Us recomanem fermament utilitzar diversos proveïdors TacoTranslate
a la vostra aplicació. Això és útil per organitzar les vostres traduccions i cadenes en diferents orígens, com ara la capçalera, el peu de pàgina o seccions específiques.
Pots llegir més sobre la utilització d’orígens aquí.
Els proveïdors de TacoTranslate
hereten la configuració de qualsevol proveïdor pare, així que no hauràs de repetir cap altra configuració.
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>
);
}
Substituir l'origen o la configuració regional
A més d’utilitzar múltiples proveïdors TacoTranslate
, també podeu sobreescriure tant l’origen com la configuració local en els nivells del component Translate
i 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" />
</>
);
}
Gestió de la càrrega
Quan canvieu d’idioma al costat del client, obtenir les traduccions pot trigar uns moments segons la connexió de l’usuari. Podeu mostrar un indicador de càrrega per millorar l’experiència de l’usuari proporcionant retroalimentació visual durant el canvi.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Pluralització
Per gestionar la pluralització i mostrar correcte les etiquetes basades en el recompte en diferents idiomes, això es considera una millor 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)}}
/>
);
}
Diversos idiomes
Per donar suport a diversos idiomes simultàniament dins de la mateixa aplicació, podeu utilitzar diversos proveïdors de TacoTranslate amb diferents valors de locale
com es mostra a continuació:
També podeu sobreescriure el locale
a nivell de component 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>
);
}
Utilitzant identificadors de traducció
Pots afegir un id
al component Translate
per gestionar diferents traduccions o significats per a la mateixa cadena. Això és especialment útil quan un mateix text requereix diferents traduccions segons el context. Assignant ID únics, assegures que cada instància de la cadena es tradueix amb precisió d’acord amb el seu significat específic.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Per exemple, l'inici de sessió de l'encapçalament es podria traduir com a “Iniciar sesión” i l'inici de sessió del peu de pàgina es podria traduir com a “Acceder” en espanyol.