Localisation sans effort pour les applications React

Comment ça fonctionne

Installez le package TacoTranslate via npm :

npm install tacotranslate

Une fois que vous avez installé le module, 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 cela ne nécessite pas d’ajouter une carte de crédit.

Dans l'interface utilisateur de l'application TacoTranslate, créez un projet, puis accédez à son onglet des clés 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 la clé public, et la clé read/write est la clé secret. Par exemple, vous pouvez les ajouter dans 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 la locale de secours par défaut. Dans cet exemple, nous le définirons sur en pour l'anglais.
• TACOTRANSLATE_ORIGIN : Le « dossier » où vos chaînes 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

Veillez à 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 enveloppant votre application avec 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 désormais utiliser le composant Translate n'importe où dans votre application pour afficher du texte traduit ! N'oubliez pas de consulter notre documentation pour plus d'informations, ainsi que 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 de l'utilisation de TacoTranslate

• Gain de temps : Automatise le processus fastidieux de localisation et de collecte des chaînes, vous faisant ainsi 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 assistées par IA garantissent 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 base de clients se développent.

Commencez dès aujourd'hui !

Votre application React sera traduite automatiquement dès que vous ajoutez des chaînes dans un composant Translate. Notez que seuls les environnements disposant des permissions 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 en production, en ajoutant de nouvelles chaînes avant la mise en ligne. Cela empêchera quiconque de voler votre clé API secrète et, potentiellement, d’alourdir votre projet de traduction en ajoutant des chaînes indésirables.

N’oubliez pas de consulter les exemples complets sur notre profil GitHub. Si vous rencontrez des problèmes, n’hésitez pas à nous contacter, nous serons ravis de vous aider.

TacoTranslate vous permet de localiser automatiquement vos applications React rapidement vers et depuis n’importe quelle langue. Traduisez gratuitement !