Documentation : utilisation avancée

Utilisation avancée

French (Canada)

Gestion des langues de droite à gauche

TacoTranslate facilite le support des langues de droite à gauche (RTL), telles que l'arabe et l'hébreu, dans vos applications React. Un traitement approprié 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 isRightToLeftLocaleCode fournie 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ésactiver la traduction

Pour désactiver la traduction de certaines parties d'une chaîne ou pour s'assurer que certains segments restent inchangés, vous pouvez utiliser des crochets triples. 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.

Fournisseurs multiples de TacoTranslate

Nous vous encourageons fortement à utiliser plusieurs TacoTranslate fournisseurs 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.

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

Surcharge de l'origine ou de la locale

En plus d'utiliser plusieurs TacoTranslate fournisseurs, vous pouvez également remplacer à la fois l'origine et la locale au niveau du Translate composant et du useTranslation hook.

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

Lorsque vous changez de langue côté client, la récupération des traductions peut prendre quelques instants en fonction de 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.

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 des étiquettes basées sur le comptage dans différentes langues, cela est considéré comme une meilleure 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 locale valeurs 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 Translate composant pour gérer différentes traductions ou significations pour la même chaîne. Cela est particulièrement utile lorsque le même texte nécessite différentes traductions en fonction du contexte. En attribuant des IDs uniques, vous vous assurez que chaque instance de la chaîne est traduite avec précision selon 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, header login pourrait se traduire par “Iniciar sesión”, et footer login pourrait se traduire par “Acceder” en espagnol.

Meilleures pratiques