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

Vill du utöka din React-applikation till nya marknader? TacoTranslate gör det otroligt enkelt att lokalisera dina React-appar, så att du kan nå en global publik utan krångel.

Varför välja TacoTranslate för React?

Sömlös integration: Utformad specifikt för React-applikationer, integreras TacoTranslate smidigt i ditt befintliga arbetsflöde.
Automatisk insamling av strängar: Slipp att manuellt hantera JSON-filer. TacoTranslate samlar automatiskt in strängar från din kodbas.
AI-drivna översättningar: Utnyttja kraften i AI för att leverera kontextuellt korrekta översättningar som passar tonen i din applikation.
Omedelbart språkstöd: Lägg till stöd för nya språk med bara ett klick, vilket gör din applikation globalt tillgänglig.

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 ett kreditkort.

I TacoTranslate-applikationens användargränssnitt, skapa ett projekt och gå till fliken för API-nycklar. Skapa en read nyckel och en read/write nyckel. Vi sparar dem som miljövariabler. Den read nyckeln är vad vi kallar public och den read/write nyckeln är secret. Till exempel kan du lägga till dem i en .env fil i projektets rotmapp.

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

TACOTRANSLATE_DEFAULT_LOCALE: Den förvalda fallback-lokalkoden. I det här exemplet ställer vi in den på en för engelska.
TACOTRANSLATE_ORIGIN: Den "mapp" där dina strängar kommer att lagras, till exempel webbplatsens URL. Läs mer om ursprung här.

.env

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 klientsidans produktionsmiljöer.

Konfigurera TacoTranslate

Initiera TacoTranslate i din React-applikation genom att omsluta din applikation med TacoTranslates kontextleverantör:

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! Titta gärna på vår dokumentation för mer information och implementeringsguider som är anpassade till din uppsättning.

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 tidsödande processen för lokalisering och insamling av strängar, vilket frigör 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 din 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 som ska översättas.

Vi rekommenderar att ha en sluten och säker stagingmiljö 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 gör ditt översättningsprojekt onödigt stort genom att lägga till 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!