Utilisation avancée
Gestion des langues s'écrivant de droite à gauche
TacoTranslate facilite la prise en charge des langues écrites de droite à gauche (RTL), comme l'arabe et l'hébreu, dans vos applications React. Une gestion correcte des langues RTL garantit que votre contenu est affiché correctement pour les utilisateurs qui lisent de droite à gauche.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
Vous pouvez également utiliser la fonction fournie isRightToLeftLocaleCode
pour vérifier la langue actuelle en dehors de React.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Désactivation de la traduction
Pour désactiver la traduction de certaines parties d'une chaîne ou pour garantir que certains segments soient conservés tels quels, vous pouvez utiliser les triples crochets. Cette fonctionnalité est utile pour maintenir le format original des noms, des termes techniques ou de tout autre contenu qui ne doit pas être traduit.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
Dans cet exemple, le mot « TacoTranslate » restera inchangé dans la traduction.
Plusieurs fournisseurs TacoTranslate
Nous encourageons fortement l'utilisation de plusieurs fournisseurs TacoTranslate
dans votre application. Cela est utile pour organiser vos traductions et chaînes en différentes origines, telles que votre en-tête, pied de page ou sections spécifiques.
Vous pouvez en savoir plus sur l’utilisation des origines ici.
Les fournisseurs TacoTranslate
héritent des paramètres de tout fournisseur parent, vous n’aurez donc pas à répéter d’autres paramètres.
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>
);
}
Remplacer l’origine ou la locale
En plus d'utiliser plusieurs fournisseurs TacoTranslate
, vous pouvez également remplacer à la fois l'origine et la locale au niveau du composant Translate
et du 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" />
</>
);
}
Gestion du chargement
Lors du changement de langue côté client, la récupération des traductions peut prendre quelques instants selon la connexion de l’utilisateur. Vous pouvez afficher un indicateur de chargement pour améliorer l’expérience utilisateur en fournissant un retour visuel pendant la transition.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Pluralisation
Pour gérer correctement la pluralisation et l’affichage des étiquettes basées sur le nombre dans différentes langues, cela est considéré comme une bonne pratique :
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)}}
/>
);
}
Plusieurs langues
Pour prendre en charge plusieurs langues simultanément au sein de la même application, vous pouvez utiliser plusieurs fournisseurs TacoTranslate avec différentes valeurs de locale
comme montré ci-dessous :
Vous pouvez également remplacer le locale
au niveau du composant ou du 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>
);
}
Utilisation des ID de traduction
Vous pouvez ajouter un id
au composant Translate
pour gérer différentes traductions ou significations pour la même chaîne. Ceci est particulièrement utile lorsque le même texte nécessite des traductions différentes selon le contexte. En attribuant des identifiants uniques, vous vous assurez que chaque instance de la chaîne est traduite avec précision selon sa signification spécifique.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Par exemple, la connexion en-tête pourrait se traduire par « Iniciar sesión », et la connexion pied de page pourrait se traduire par « Acceder » en espagnol.