La meilleure solution pour l'internationalisation (i18n) des applications React

Comment ça fonctionne

Installez le paquet TacoTranslate via npm :

npm install tacotranslate

Une fois le module installé, vous devrez créer un compte TacoTranslate, un projet de traduction et les clés API associées. Créez un compte ici. C’est gratuit et aucune carte de crédit n’est requise.

Dans l'interface de l'application TacoTranslate, créez un projet et accédez à l'onglet des clés d'API. Créez une clé read et une clé read/write. Nous les enregistrerons en tant que variables d'environnement. La clé read est ce que nous appelons public et la clé read/write est secret. Par exemple, vous pouvez les ajouter à un fichier .env à la racine de votre projet.

Vous devrez également ajouter deux autres variables d'environnement : TACOTRANSLATE_DEFAULT_LOCALE et TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Le code de langue de repli par défaut. Dans cet exemple, nous le définirons sur en pour l'anglais.
• TACOTRANSLATE_ORIGIN: Le « dossier » où vos chaînes de caractères seront stockées, comme l'URL de votre site Web. En savoir plus sur les origines ici.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Assurez-vous de ne jamais divulguer la clé API secrète read/write dans les environnements de production côté client.

Configuration de TacoTranslate

Initialisez TacoTranslate dans votre application React en l'enveloppant dans le fournisseur de contexte TacoTranslate :

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

Vous pouvez maintenant utiliser le composant Translate n'importe où dans votre application pour afficher le texte traduit ! N'oubliez pas de consulter notre documentation pour plus d'informations et pour des guides d'implémentation spécifiques à votre configuration.

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

Avantages d'utiliser TacoTranslate

• Gain de temps: Automatise le processus fastidieux de localisation et de collecte des chaînes, vous faisant gagner un temps précieux.
• Rentable: Réduit le besoin de traductions manuelles, diminuant ainsi vos coûts de localisation.
• Précision améliorée: Les traductions alimentées par l'IA assurent des résultats contextuellement précis et de haute qualité.
• Solution évolutive: Ajoutez facilement la prise en charge de nouvelles langues à mesure que votre application et votre clientèle se développent.

Commencez dès aujourd'hui !

Votre application React sera traduite automatiquement lorsque vous ajouterez des chaînes à un composant Translate. Notez que seuls les environnements disposant des autorisations read/write sur la clé API pourront créer de nouvelles chaînes à traduire.

Nous recommandons de disposer d’un environnement de préproduction fermé et sécurisé où vous pouvez tester votre application de production et ajouter de nouvelles chaînes avant la mise en production. Cela empêchera quiconque de voler votre clé API secrète et pourrait potentiellement gonfler votre projet de traduction en ajoutant des chaînes indésirables.

Be sure to check out the complete examples over at our GitHub profile. If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Translate for free!