Enkel lokalisering for React-applikasjoner

Hvordan det fungerer

Installer TacoTranslate-pakken via npm:

npm install tacotranslate

Når du har installert modulen, må du opprette en TacoTranslate-konto, et oversettelsesprosjekt, og tilhørende API-nøkler. Opprett en konto her. Det er gratis, og krever ikke at du legger til kredittkort.

I TacoTranslate-applikasjonens brukergrensesnitt oppretter du et prosjekt og navigerer til fanen for API-nøkler. Opprett en read nøkkel og en read/write nøkkel. Vi lagrer dem som miljøvariabler. read nøkkelen kaller vi public og read/write nøkkelen er secret. For eksempel kan du legge dem til i en .env fil i roten av prosjektet ditt.

Du må også legge til to flere miljøvariabler: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalkode. I dette eksemplet setter vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: «Mappen» hvor strengene dine vil bli lagret, for eksempel URL-en til nettstedet ditt. Les mer om origins her.

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

Pass på å aldri lekke den hemmelige read/write API-nøkkelen til klient-side produksjonsmiljøer.

Sette opp TacoTranslate

Initialiser TacoTranslate i din React-applikasjon ved å pakke applikasjonen din inn i 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 nå bruke Translate komponenten hvor som helst i applikasjonen din for å vise oversatt tekst! Husk å sjekke vår dokumentasjon for mer informasjon, og for implementeringsguider som er spesifikke for ditt oppsett.

import {Translate} from 'tacotranslate/react';

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

Fordeler med å bruke TacoTranslate

• Tidsbesparende: Automatiserer den tidkrevende prosessen med lokalisering og innsamling av strenger, og sparer deg verdifull tid.
• Kostnadseffektivt: Reduserer behovet for manuelle oversettelser, noe som senker lokaliseringskostnadene dine.
• Forbedret nøyaktighet: AI-drevne oversettelser sikrer kontekstuelt nøyaktige og resultater av høy kvalitet.
• Skalerbar løsning: Legg enkelt til støtte for nye språk etter hvert som applikasjonen og kundebasen vokser.

Kom i gang i dag!

Din React-applikasjon vil bli automatisk oversatt når du legger til strenger i en Translate komponent. Merk at kun miljøer med read/write tillatelser på API-nøkkelen vil kunne opprette nye strenger som skal oversettes.

Vi anbefaler å ha et lukket og sikret staging-miljø hvor du kan teste produksjonsapplikasjonen din, og legge til nye strenger før du går live. Dette vil forhindre at noen stjeler din hemmelige API-nøkkel, og potensielt gjør oversettelsesprosjektet ditt større ved å legge til uønskede strenger.

Husk å se de komplette eksemplene på vår GitHub-profil. Hvis du støter på problemer, ikke nøl med å ta kontakt, så hjelper vi deg gjerne.

TacoTranslate lar deg automatisk lokal tilpasse dine React-applikasjoner raskt til og fra hvilket som helst språk. Oversett gratis!