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 et kredittkort.

Innenfor TacoTranslate-applikasjonens UI, opprett et prosjekt, og gå til fanen for API-nøkler. Opprett én read nøkkel, og én read/write nøkkel. Vi vil lagre 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 ekstra miljøvariabler: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard tilbakefalls-lokalkode. I dette eksempelet 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å at du aldri lekker den hemmelige read/write API-nøkkelen til produksjonsmiljøer på klientsiden.

Slik setter du opp TacoTranslate

Initialiser TacoTranslate i din React-applikasjon ved å omslutte applikasjonen din 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 nå bruke Translate -komponenten hvor som helst i applikasjonen din for å vise oversatt tekst! Sørg for å sjekke dokumentasjonen vår for mer informasjon, og for implementeringsveiledninger spesifikke for din oppsett.

import {Translate} from 'tacotranslate/react';

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

Fordeler ved å bruke TacoTranslate

• Tidsbesparende: Automatiserer den tidkrevende prosessen med lokalisering og innsamling av strenger, og sparer deg verdifull tid.
• Kostnadseffektiv: Reduserer behovet for manuelle oversettelser, noe som senker lokaliseringkostnadene dine.
• Forbedret nøyaktighet: AI-drevne oversettelser sikrer kontekstuelt nøyaktige og høykvalitets resultater.
• 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 oversatt automatisk 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 for oversettelse.

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 blåser opp oversettelsesprosjektet ditt ved å legge til uønskede strenger.

Pass på å se de komplette eksemplene på vår GitHub-profil. Hvis du støter på problemer, er det bare å ta kontakt, så hjelper vi deg gjerne.

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