Enkel lokalisering för React-applikationer

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 anger något 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 vad 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: Standard fallback-lokalkod. I detta exempel sätter vi den till en för engelska.
• TACOTRANSLATE_ORIGIN: ”Mappen” där dina strängar kommer att lagras, såsom 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 klient-sidans produktionsmiljöer.

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 implementationsguider som är specifika 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.
• Skalbar lösning: Lägg enkelt till stöd för nya språk i takt med att 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 ha en avgränsad och säker staging-miljö där du kan testa din produktionsapplikation och lägga till nya strängar innan den går live. Detta förhindrar att någon stjäl din hemliga API-nyckel och potentiellt belastar ditt översättningsprojekt genom att lägga till obehöriga strängar.

Se till att kolla in de kompletta exemplen på vår GitHub-profil. Om du stöter på några problem, tveka inte att höra av dig, så hjälper vi dig mer än gärna.

TacoTranslate låter dig automatiskt lokalisera dina React-applikationer snabbt till och från alla språk. Översätt gratis!