Effortless lokaliserin 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 inn kredittkort.

I TacoTranslate-applikasjonens brukergrensesnitt, opprett et prosjekt og naviger til fanen for API-nøkler. Opprett én read nøkkel og én 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 eksempelet setter vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: “Mappen” der strengene dine lagres, 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 produksjonsmiljøer på klientsiden.

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! Sørg for å sjekke vår dokumentasjon for mer informasjon, og for implementeringsguider spesifikke for ditt 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 kjedelige prosessen med lokalisering og innsamling av strenger, og sparer deg verdifull tid.
• Kostnadseffektiv: Reduserer behovet for manuelle oversettelser, noe som senker dine lokaliseringskostnader.
• 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 kundegrunnlaget ditt vokser.

Kom i gang i dag!

Din React-applikasjon vil bli oversatt automatisk når du legger til noen strenger i en Translate komponent. Vær oppmerksom på 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 sikkert staging-miljø hvor du kan teste produksjonsapplikasjonen din, og legge til nye strenger før den går live. Dette vil forhindre at noen stjeler din hemmelige API-nøkkel, og potensielt øker størrelsen på oversettelsesprosjektet ditt ved å legge til uønskede strenger.

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!