Moeitelose lokalisering vir React-toepassings

Hoe dit werk

Installeer die TacoTranslate-pakket via npm:

npm install tacotranslate

Wanneer jy die module geïnstalleer het, sal jy 'n TacoTranslate-rekening, 'n vertaalprojek, en verwante API-sleutels moet skep. Skep hier 'n rekening. Dit is gratis, en vereis nie dat jy 'n kredietkaart moet byvoeg nie.

Binne die TacoTranslate-toepassingskoppelvlak, skep ʼn projek en navigeer na die API-sleutels-oortjie daarvan. Skep een read sleutel, en een read/write sleutel. Ons sal dit as omgewingveranderlikes stoor. Die read sleutel is wat ons public noem en die read/write sleutel is secret. Byvoorbeeld, jy kan dit by ʼn .env lêer in die wortel van jou projek voeg.

Jy sal ook twee ekstra omgewingsveranderlikes moet byvoeg: TACOTRANSLATE_DEFAULT_LOCALE en TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Die verstek terugval-lokaal kode. In hierdie voorbeeld stel ons dit op en vir Engels.
• TACOTRANSLATE_ORIGIN: Die “lêergids” waar jou stringe gestoor sal word, soos die URL van jou webwerf. Lees meer oor oorspronge hier.

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

Maak seker dat jy nooit die geheime read/write API-sleutel na kliënt-side produksie-omgewings lek nie.

TacoTranslate opstel

Initialiseer TacoTranslate in jou React-toepassing deur jou toepassing in die TacoTranslate-konteksverskaffer te vou:

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>
	);
}

Jy kan nou die Translate komponent enige plek binne jou toepassing gebruik om vertaalde teks te vertoon! Maak seker jy kyk na ons dokumentasie vir meer inligting, en vir implementasie-gidse spesifiek vir jou opstelling.

import {Translate} from 'tacotranslate/react';

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

Voordele van die gebruik van TacoTranslate

• Tyd besparing: Outomatiseer die vervelige proses van lokalisering en versameling van stringe, wat jou waardevolle tyd bespaar.
• Kostedoeltreffend: Verminder die behoefte aan handmatige vertalings, wat jou lokaliseringkoste verlaag.
• Verbeterde akkuraatheid: KI-gedrewe vertalings verseker konteksueel akkurate en hoë kwaliteit resultate.
• Skaleerbare oplossing: Voeg maklik ondersteuning vir nuwe tale by namate jou toepassing en kliëntebasis groei.

Begin vandag!

Jou React-toepassing sal outomaties vertaal word wanneer jy enige stringe by ʼn Translate komponent voeg. Let daarop dat slegs omgewings met read/write toestemmings op die API-sleutel nuwe stringe kan skep om vertaal te word.

Ons beveel aan om ʼn geslote en beveiligde staging-omgewing te hê waar jy jou produksie-toepassing kan toets deur nuwe stringe by te voeg voordat dit regstreeks gaan. Dit sal keer dat enigiemand jou geheime API-sleutel steel en moontlik jou vertaalprojek vol maak met willekeurige stringe.

Maak seker om die volledige voorbeelde by ons GitHub-profiel te bekyk. As jy enige probleme ondervind, voel vry om ons te kontak, en ons sal meer as bly wees om te help.

TacoTranslate stel jou in staat om jou React-toepassings outomaties vinnig na en van enige taal te lokaliseer. Vertaal gratis!