Den bästa lösningen för internationalisering (i18n) i React-appar

Hur det fungerar

Installera TacoTranslate-paketet via npm:

npm install tacotranslate

När du har installerat modulen behöver du skapa ett TacoTranslate-konto, ett översättningsprojekt och tillhörande API-nycklar. Skapa ett konto här. Det är gratis och kräver inte att du lägger till ett kreditkort.

Inom TacoTranslate-applikationens användargränssnitt, skapa ett projekt och navigera till dess flik för API-nycklar. Skapa en read nyckel och en read/write nyckel. Vi kommer att spara dem som miljövariabler. read nyckeln är det vi kallar public och read/write nyckeln är secret. Till exempel kan du lägga till dem i en .env fil i roten av ditt projekt.

Du behöver också lägga till två miljövariabler till: TACOTRANSLATE_DEFAULT_LOCALE och TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Den förvalda reservplatskoden. I detta exempel sätter vi den till en för engelska.
• TACOTRANSLATE_ORIGIN: ”Mappen” där dina strängar kommer att sparas, som till exempel URL:en till din webbplats. Läs mer om origins här.

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

Se till att aldrig läcka den hemliga read/write API-nyckeln till produktionsmiljöer på klientsidan.

Konfigurera TacoTranslate

Initiera TacoTranslate i din React-applikation genom att omsluta din applikation med TacoTranslate context provider:

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

Du kan nu använda Translate -komponenten var som helst i din applikation för att visa översatt text! Se till att kolla in vår dokumentation för mer information och implementationsguiden som är specifik för din konfiguration.

import {Translate} from 'tacotranslate/react';

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

Fördelar med att använda TacoTranslate

• Tidsbesparande: Automatiserar den tråkiga processen med lokalisering och insamling av strängar, vilket sparar värdefull tid.
• Kostnadseffektivt: Minskar behovet av manuella översättningar och sänker dina lokaliseringskostnader.
• Förbättrad noggrannhet: AI-drivna översättningar säkerställer kontextuellt korrekta och högkvalitativa resultat.
• Skalerbar lösning: Lägg enkelt till stöd för nya språk när din applikation och kundbas växer.

Kom igång idag!

Din React-applikation kommer att översättas automatiskt när du lägger till strängar i en Translate komponent. Observera att endast miljöer med read/write behörigheter på API-nyckeln kommer att kunna skapa nya strängar för översättning.

Vi rekommenderar att du har en sluten och säker staging-miljö där du kan testa din produktionsapplikation och lägga till nya strängar innan du går live. Detta förhindrar att någon stjäl din hemliga API-nyckel och potentiellt utökar ditt översättningsprojekt med oönskade strängar.

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!