Den bedste løsning for internationalisering (i18n) i React-apps
Leder du efter at udvide din React-applikation til nye markeder? TacoTranslate gør det utrolig nemt at lokalisere dine React-apps, så du kan nå et globalt publikum uden besvær.
Hvorfor vælge TacoTranslate til React?
- Sømløs integration: Designet specifikt til React-applikationer, TacoTranslate integreres ubesværet i din eksisterende workflow.
- Automatisk strengindsamling: Ikke mere manuel håndtering af JSON-filer. TacoTranslate indsamler automatisk strenge fra din kodebase.
- AI-drevne oversættelser: Udnyt kraften i AI til at levere kontekstuelt præcise oversættelser, der passer til tonen i din applikation.
- Øjeblikkelig sprogsupport: Tilføj support for nye sprog med blot et klik, så din applikation bliver globalt tilgængelig.
Hvordan det fungerer
Installer TacoTranslate-pakken via npm:
npm install tacotranslate
Når du har installeret modulet, skal du oprette en TacoTranslate-konto, et oversættelsesprojekt og tilhørende API-nøgler. Opret en konto her. Det er gratis, og kræver ikke, at du tilføjer et kreditkort.
Inde i TacoTranslate-applikationens brugerflade skal du oprette et projekt og navigere til fanen for API-nøgler. Opret én read
nøgle og én read/write
nøgle. Vi gemmer dem som miljøvariabler. read
nøglen er det, vi kalder public
og read/write
nøglen er secret
. For eksempel kan du tilføje dem til en .env
fil i roden af dit projekt.
Du skal også tilføje to flere miljøvariabler: TACOTRANSLATE_DEFAULT_LOCALE
og TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Standard fallback-sprogkode. I dette eksempel sætter vi den tilen
for engelsk.TACOTRANSLATE_ORIGIN
: “Mappen” hvor dine strenge vil blive gemt, såsom URL’en til dit website. Læs mere om origins her.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Sørg for aldrig at lække den hemmelige read/write
API-nøgle til klient-side produktionsmiljøer.
Opsætning af TacoTranslate
Initialiser TacoTranslate i din React-applikation ved at indpakke din applikation i TacoTranslate-kontekstprovider:
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 bruge Translate
komponenten hvor som helst i din applikation til at vise oversat tekst! Husk at tjekke vores dokumentation for mere information og implementeringsvejledninger, der er specifikke for din opsætning.
import {Translate} from 'tacotranslate/react';
export default async function Component() {
return (
<Translate string="Hello? This is TacoTranslate speaking." />
);
}
Fordele ved at bruge TacoTranslate
- Tidsbesparende: Automatiserer den kedelige proces med lokalisering og indsamling af strenge, hvilket sparer dig værdifuld tid.
- Omkostningseffektivt: Reducerer behovet for manuelle oversættelser, hvilket sænker dine lokaliseringsomkostninger.
- Forbedret nøjagtighed: AI-drevne oversættelser sikrer kontekstuelt korrekte og højtkvalitative resultater.
- Skalerbar løsning: Tilføj nemt støtte til nye sprog, efterhånden som din applikation og kundebase vokser.
Kom i gang i dag!
Din React-applikation vil blive oversat automatisk, når du tilføjer tekststrenge til en Translate
komponent. Bemærk, at kun miljøer med read/write
tilladelser på API-nøglen vil kunne oprette nye tekststrenge til oversættelse.
Vi anbefaler at have et lukket og sikret staging-miljø, hvor du kan teste din produktionsapplikation og tilføje nye tekststrenge, inden du går live. Dette forhindrer, at nogen stjæler din hemmelige API-nøgle og potentielt fylder dit oversættelsesprojekt med uønskede tekststrenge.
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!