Documentation : Utilisation avancée

Utilisation avancée

French (Canada)

Prise en charge des langues 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 appropriée de ces langues garantit que votre contenu s’affiche 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 parties spécifiques d'une chaîne de caractères ou pour vous assurer que certains segments sont conservés tels quels, vous pouvez utiliser des triples crochets carrés. Cette fonctionnalité est utile pour préserver le format d'origine des noms, des termes techniques ou de tout autre contenu qui ne devrait 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 de TacoTranslate

Nous vous encourageons vivement à utiliser plusieurs TacoTranslate fournisseurs dans votre application. Cela permet d'organiser vos traductions et vos chaînes par origine, par exemple l'en‑tête, le pied de page ou des sections spécifiques.

Vous pouvez en savoir plus sur l'utilisation des origines ici.

TacoTranslate fournisseurs 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>
	);
}

Remplacement de l’origine ou de 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 le changement de langue.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralisation

Pour gérer la pluralisation et afficher correctement les libellés dépendant du nombre dans différentes langues, il est recommandé d'appliquer la pratique suivante :

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 indiqué 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 identifiants de traduction

Vous pouvez ajouter un id au composant Translate pour gérer différentes traductions ou significations d’une même chaîne. Cela 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 en fonction de son sens 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, le lien de connexion de l'en-tête pourrait se traduire par “Iniciar sesión”, et le lien de connexion du pied de page pourrait se traduire par “Acceder” en espagnol.

Bonnes pratiques