Moeiteloze lokalisatie voor React-toepassingen

Hoe het werkt

Installeer het TacoTranslate-pakket via npm:

npm install tacotranslate

Wanneer je de module hebt geïnstalleerd, moet je een TacoTranslate-account aanmaken, een vertaalproject maken en bijbehorende API-sleutels genereren. Maak hier een account aan. Het is gratis en vereist geen creditcard.

Binnen de TacoTranslate applicatie-UI maakt u een project aan en gaat u naar het tabblad API-sleutels. Maak een read sleutel en een read/write sleutel aan. We slaan deze op als omgevingsvariabelen. De read sleutel noemen we public en de read/write sleutel is secret. U kunt ze bijvoorbeeld toevoegen aan een .env bestand in de root van uw project.

Je moet ook nog twee omgevingsvariabelen toevoegen: TACOTRANSLATE_DEFAULT_LOCALE en TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: De standaard fallback locale-code. In dit voorbeeld stellen we deze in op en voor Engels.
• TACOTRANSLATE_ORIGIN: De “map” waar je strings worden opgeslagen, bijvoorbeeld de URL van je website. Lees hier meer over origins.

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

Zorg ervoor dat je de geheime read/write API-sleutel nooit lekt naar client-side productieomgevingen.

TacoTranslate instellen

Initialiseer TacoTranslate in je React-applicatie door je applicatie te omwikkelen met de 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>
	);
}

Je kunt nu de Translate component overal binnen je applicatie gebruiken om vertaalde tekst weer te geven! Zorg ervoor dat je onze documentatie bekijkt voor meer informatie en implementatiehandleidingen specifiek voor jouw setup.

import {Translate} from 'tacotranslate/react';

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

Voordelen van het gebruik van TacoTranslate

• Tijdbesparend: Automatiseert het saaie proces van lokalisatie en het verzamelen van strings, waardoor je waardevolle tijd bespaart.
• Kosteneffectief: Vermindert de noodzaak van handmatige vertalingen, waardoor je lokalisatiekosten dalen.
• Verbeterde nauwkeurigheid: AI-gestuurde vertalingen zorgen voor contextueel accurate en hoogwaardige resultaten.
• Schaalbare oplossing: Voeg eenvoudig ondersteuning toe voor nieuwe talen naarmate je applicatie en klantenbestand groeien.

Begin vandaag nog!

Je React-toepassing wordt automatisch vertaald zodra je teksten toevoegt aan een Translate component. Houd er rekening mee dat alleen omgevingen met read/write permissies op de API-sleutel nieuwe te vertalen teksten kunnen aanmaken.

We raden aan om een afgesloten en beveiligde staging-omgeving te hebben waarin je je productieapplicatie kunt testen en nieuwe teksten kunt toevoegen voordat je live gaat. Dit voorkomt dat iemand je geheime API-sleutel kan stelen en mogelijk je vertaalproject vervuilt door ongewenste teksten toe te voegen.

Zorg ervoor dat je de complete voorbeelden bekijkt op ons GitHub-profiel. Mocht je problemen ondervinden, neem dan gerust contact op, we helpen je graag.

Met TacoTranslate kun je je React-applicaties automatisch en snel lokaliseren naar en vanuit elke taal. Vertaal gratis!