Nyaraka: Matumizi ya juu – TacoTranslate

Matumizi ya juu

Swahili

Kushughulikia lugha zinazosomwa kutoka kulia kwenda kushoto

TacoTranslate inafanya iwe rahisi kuunga mkono lugha zinazosomwa kutoka kulia kwenda kushoto (RTL), kama Kiarabu na Kiebrania, katika programu zako za React. Ushughulikiaji sahihi wa lugha za RTL unahakikisha kwamba yaliyomo yako yanaonyeshwa kwa usahihi kwa watumiaji wanaosoma kutoka kulia kwenda kushoto.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Unaweza pia kutumia kazi iliyotolewa isRightToLeftLocaleCode ili kuangalia lugha ya sasa nje ya React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

function foo(locale = 'es') {
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	// ...
}

Kuzima tafsiri

Ili kuzima tafsiri kwa sehemu maalum za mnyororo wa maandishi au kuhakikisha vipengele fulani zihifadhiwe kama zilivyo, unaweza kutumia mabano matatu ya mraba. Kipengele hiki kinasaidia kudumisha muundo wa asili wa majina, istilahi za kiufundi, au maudhui mengine yoyote ambayo hayapaswi kutafsiriwa.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

Katika mfano huu, neno “TacoTranslate” litabaki bila kubadilika katika tafsiri.

Watoa huduma kadhaa wa TacoTranslate

Tunahimiza sana kutumia watoaji wengi wa TacoTranslate katika programu yako. Hii ni muhimu kwa kupanga tafsiri zako na stringi katika vyanzo tofauti, kama vile kichwa, sehemu ya chini, au sehemu maalum.

Unaweza kusoma zaidi kuhusu jinsi ya kutumia vyanzo hapa.

TacoTranslate watoa huduma wanarithi mipangilio kutoka kwa mtoa huduma mzazi wowote, hivyo hautahitaji kurudia mipangilio mingine yoyote.

import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate} from 'tacotranslate/react';

const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});

function Header() {
	return (
		<TacoTranslate origin="header">
			// ...
		</TacoTranslate>
	);
}

function Menu() {
	return (
		<TacoTranslate origin="menu">
			// ...
		</TacoTranslate>
	);
}

export default function App() {
	return (
		<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
			<Header />
			<Menu />
		</TacoTranslate>
	);
}

Kubadilisha asili au eneo

Mbali na kutumia watoa huduma kadhaa wa TacoTranslate, pia unaweza kubadilisha asili na mipangilio ya eneo (locale) kwenye ngazi za komponenti ya Translate na hook ya useTranslation.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

Kushughulikia upakiaji

Wakati unabadilisha lugha upande wa mteja, upakuaji wa tafsiri unaweza kuchukua muda kidogo kulingana na muunganisho wa mtumiaji. Unaweza kuonyesha kiashiria cha kupakia ili kuboresha uzoefu wa mtumiaji kwa kutoa mrejesho wa kuona wakati wa mabadiliko.

import {useTacoTranslate} from 'tacotranslate/react';

function Component() {
	const {isLoading} = useTacoTranslate();

	return (
		isLoading ? 'Translations are loading...' : null
	);
}

Uundaji wa wingi

Ili kushughulikia utofauti wa wingi na kuonyesha lebo zinazotegemea idadi kwa usahihi katika lugha tofauti, hii inachukuliwa kuwa mazoea bora:

import {Translate, useLocale} from 'tacotranslate/react';

function PhotoCount() {
	const locale = useLocale();
	const count = 1;

	return count === 0 ? (
		<Translate string="You have no photos." />
	) : count === 1 ? (
		<Translate string="You have 1 photo." />
	) : (
		<Translate
			string="You have {{count}} photos."
			variables={{count: count.toLocaleString(locale)}}
		/>
	);
}

Lugha nyingi

Ili kuunga mkono lugha nyingi kwa wakati mmoja ndani ya programu hiyo hiyo, unaweza kutumia watoa huduma wengi wa TacoTranslate na thamani tofauti za locale kama inavyoonyeshwa hapa chini:

Unaweza pia kubadilisha locale kwa ngazi ya komponenti au hook.

import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate, Translate} from 'tacotranslate/react';

const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});

function Spanish() {
	return (
		<TacoTranslate locale="es">
			<Translate string="Hello, world in Spanish!" />
		</TacoTranslate>
	);
}

function Norwegian() {
	return (
		<TacoTranslate locale="no">
			<Translate string="Hello, world in Norwegian!" />
		</TacoTranslate>
	);
}

export default function App() {
	return (
		<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
			<Spanish />
			<Norwegian />
		</TacoTranslate>
	);
}

Kutumia vitambulisho vya tafsiri

Unaweza kuongeza id kwenye komponenti ya Translate ili kushughulikia tafsiri au maana tofauti za mnyororo huo huo. Hii ni muhimu hasa wakati maandishi yale yale yanahitaji tafsiri tofauti kulingana na muktadha. Kwa kuteua vitambulisho vya kipekee, unahakikisha kwamba kila mfano wa mnyororo unatafsiriwa kwa usahihi kulingana na maana yake maalum.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Kwa mfano, kiingilio cha kichwa kinaweza kutafsiriwa kuwa “Iniciar sesión”, na kiingilio cha sehemu ya chini kinaweza kutafsiriwa kuwa “Acceder” kwa Kihispania.

Mbinu bora