Documentation : Utilisation de TacoTranslate

Utilisation de TacoTranslate

French (Canada)

Traduction des chaînes

Il existe actuellement trois façons de traduire des chaînes : le composant Translate, le hook useTranslation, ou l'utilitaire translateEntries.

Utilisation du composant Translate.
Affiche les traductions dans un élément span, et prend en charge le rendu HTML.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

Vous pouvez changer le type d'élément en utilisant, par exemple, as="p" sur le composant.

Utilisation du hook useTranslation.
Renvoie les traductions sous forme de chaîne de caractères simple. Utile, par exemple, dans les balises meta.

import {useEffect} from 'react';
import {useTranslation} from 'tacotranslate/react';

function Page() {
	const helloWorld = useTranslation('Hello, world!');

	useEffect(() => {
		alert(helloWorld);
	}, [helloWorld]);

	return (
		<title>{useTranslation('My page title')}</title>
	);
}

Utilisation de l'utilitaire translateEntries.
Traduisez des chaînes côté serveur. Boostez vos images OpenGraph.

import {createEntry, translateEntries} from 'tacotranslate';

async function generateMetadata(locale = 'es') {
	const title = createEntry({string: 'Hello, world!'});
	const description = createEntry({string: 'TacoTranslate on the server'});

	const translations = await translateEntries(
		tacoTranslate,
		{origin: 'opengraph', locale},
		[title, description]
	);

	return {
		title: translations(title),
		description: translations(description)
	};
}

Comment les chaînes sont traduites

Lorsque les chaînes atteignent nos serveurs, nous les validons et les enregistrons d'abord, puis renvoyons immédiatement une traduction automatique. Bien que les traductions automatiques soient généralement de qualité inférieure à celles générées par notre IA, elles offrent une réponse initiale rapide.

Simultanément, nous lançons une tâche de traduction asynchrone pour générer une traduction par IA de haute qualité et à la fine pointe de la technologie pour votre chaîne. Une fois la traduction par IA prête, elle remplacera la traduction automatique et sera envoyée chaque fois que vous demanderez des traductions pour vos chaînes.

Si vous avez traduit manuellement une chaîne, ces traductions ont la priorité et sont renvoyées à la place.

Utiliser les origines

Les projets TacoTranslate contiennent ce que nous appelons origines. Pensez-y comme à des points d’entrée, des dossiers ou des groupes pour vos chaînes de caractères et vos traductions.

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

Les origines vous permettent de séparer les chaînes en conteneurs pertinents. Par exemple, vous pourriez avoir une origine pour la documentation et une autre pour votre page marketing.

Pour un contrôle plus granulaire, vous pouvez configurer des origines au niveau du composant.

Pour y parvenir, envisagez d'utiliser plusieurs fournisseurs TacoTranslate au sein de votre projet.

Veuillez noter que la même chaîne peut recevoir des traductions différentes selon l'origine.

En fin de compte, la façon dont vous séparez les chaînes en origines dépend de vous et de vos besoins. Toutefois, notez que le fait d'avoir de nombreuses chaînes dans une même origine peut augmenter les temps de chargement.

Gestion des variables

Vous devriez toujours utiliser des variables pour le contenu dynamique, comme les noms d'utilisateur, les dates, les adresses courriel et plus encore.

Les variables dans les chaînes sont déclarées à l'aide de doubles accolades, comme {{variable}}.

import {Translate} from 'tacotranslate/react';

function Greeting() {
	const name = 'Juan';
	return <Translate string="Hello, {{name}}!" variables={{name}} />;
}

import {useTranslation} from 'tacotranslate/react';

function useGreeting() {
	const name = 'Juan';
	return useTranslation('Hello, {{name}}!', {variables: {name}});
}

Gestion du contenu HTML

Par défaut, le composant Translate prend en charge et affiche du contenu HTML. Cependant, vous pouvez désactiver ce comportement en définissant useDangerouslySetInnerHTML sur false.

Il est fortement recommandé de désactiver le rendu HTML lorsque vous traduisez du contenu non fiable, comme du contenu généré par les utilisateurs.

Tout le contenu est toujours assaini avec sanitize-html avant d'être affiché.

import {Translate} from 'tacotranslate/react';

function Page() {
	return (
		<Translate
			string={`
				Welcome to <strong>my</strong> website.
				I’m using <a href="{{url}}">TacoTranslate</a> to translate text.
			`}
			variables={{url: 'https://tacotranslate.com'}}
			useDangerouslySetInnerHTML={false}
		/>
	);
}

L'exemple ci‑dessus sera rendu en texte brut.

Rendu côté serveur