Den bästa lösningen för internationalisering (i18n) i React-appar
Vill du expandera din React-applikation till nya marknader? TacoTranslate gör det otroligt enkelt att lokalisera dina React-appar, vilket gör det möjligt för dig att nå en global publik utan krångel.
Varför välja TacoTranslate för React?
- Sömlös integration: Utformad speciellt för React-applikationer, integreras TacoTranslate enkelt i din befintliga arbetsflöde.
- Automatisk stränginsamling: Slipp hantera JSON-filer manuellt. TacoTranslate samlar automatiskt in strängar från din kodbas.
- AI-drivna översättningar: Utnyttja kraften i AI för att tillhandahålla 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 ett klick, vilket gör din applikation tillgänglig globalt.
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 skapar du ett projekt och navigerar till fliken för API-nycklar. Skapa en read
nyckel och en read/write
nyckel. Vi sparar dem som miljövariabler. read
nyckeln kallar vi för 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-språkkod. I detta exempel sätter vi den tillen
för engelska.TACOTRANSLATE_ORIGIN
: ”Mappen” där dina strängar kommer att lagras, 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 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 specifika för din setup.
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 dig värdefull tid.
- Kostnadseffektivt: Minskar behovet av manuella översättningar, vilket sänker dina lokaliseringkostnader.
- 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 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 ha en stängd och säker stagingmiljö 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 fyller 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!