Die beste oplossing vir internasionale ondersteuning (i18n) in React-apps

Hoe dit werk

Installeer die TacoTranslate-pakket via npm:

npm install tacotranslate

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

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Die standaard terugval-lokaalkode. In hierdie voorbeeld stel ons dit op en vir Engels.
• TACOTRANSLATE_ORIGIN: Die “map” 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 die geheime read/write API-sleutel nooit aan die kliëntkant se produksie-omgewings lek nie.

TacoTranslate instel

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

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 om ons dokumentasie te raadpleeg vir meer inligting en vir implementeringsgidse wat spesifiek is 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

• Tydsbesparing: Outomatiseer die vervelige proses van lokalisering en die insameling van stringe, wat jou waardevolle tyd bespaar.
• Koste-effektief: Verminder die behoefte aan handvertalings en verlaag jou lokalisasiekoste.
• Verbeterde akkuraatheid: KI-gedrewe vertalings verseker konteksueel akkurate en hoë gehalte resultate.
• Skaleerbare oplossing: Voeg maklik ondersteuning vir nuwe tale by namate jou toepassing en kliëntebasis groei.

Begin vandag nog!

Jou React-toepassing sal outomaties vertaal word wanneer jy enige stringe by 'n Translate komponent voeg. Let wel dat slegs omgewings met read/write toestemmings op die API-sleutel in staat sal wees om nuwe stringe te skep wat vertaal moet word.

Ons beveel aan om 'n geslote en beveiligde staging-omgewing te hê waar jy jou produksietoepassing kan toets, en nuwe stringe kan byvoeg voordat jy live gaan. Dit sal keer dat enigeen enigeen jou geheime API-sleutel steel, en moontlik jou vertaalprojek onnodig laat aanswel deur ongewenste stringe by te voeg.

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!