Nyaraka: Matumizi ya Juu – TacoTranslate

Matumizi ya hali ya juu

Swahili

Kushughulikia lugha zinazosomeka kutoka kulia kwenda kushoto

TacoTranslate hufanya iwe rahisi kusaidia lugha zinazosomwa kutoka kulia kwenda kushoto (RTL), kama Kiarabu na Kiebrania, katika programu zako za React. Kushughulikia lugha za RTL kwa usahihi kunahakikisha kuwa maudhui yako yanaonyeshwa ipasavyo kwa watumiaji wasomao 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 kipengele cha isRightToLeftLocaleCode kilichotolewa kuchunguza lugha ya sasa nje ya React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Kuizima tafsiri

Ili kuzima tafsiri kwa sehemu maalum za mfuatano wa maandishi au kuhakikisha sehemu fulani zinahifadhiwa kama zilivyo, unaweza kutumia mabano matatu ya mstatili. Kipengele hiki ni muhimu kwa kudumisha muundo wa asili wa majina, maneno ya 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 wengi wa TacoTranslate

Tunapendekeza kwa nguvu kutumia watoa huduma wengi wa TacoTranslate katika programu yako. Hii ni muhimu kwa kupanga tafsiri zako na mistari katika asili tofauti, kama vile kichwa cha ukurasa, sehemu ya chini ya ukurasa, au sehemu maalum.

Unaweza kusoma zaidi kuhusu kutumia asili hapa.

Watoa huduma za TacoTranslate wanarithi mipangilio kutoka kwa mtoaji mzazi wowote, hivyo hutahitaji 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>
	);
}

Kuzidi chanzo au eneo

Mbali na kutumia watoa huduma wengi wa TacoTranslate, pia unaweza kubadilisha asili na eneo kwenye vipengele vya Translate na viwango vya hook vya 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 wa kubadilisha lugha upande wa mteja, upakuaji wa tafsiri unaweza kuchukua muda kidogo kulingana na muunganisho wa mtumiaji. Unaweza kuonyesha kiashirio 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
	);
}

Uwingi wa maneno

Ili kushughulikia wingi na kuonyesha lebo za msingi wa hesabu kwa usahihi katika lugha tofauti, hii inachukuliwa kuwa mbinu 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 ile ile, unaweza kutumia watoa huduma mbalimbali wa TacoTranslate wenye 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 kwa sehemu ya Translate ili kushughulikia tafsiri tofauti au maana tofauti kwa sehemu ile ile ya maandishi. Hii ni muhimu hasa wakati maandishi yale yale yanahitaji tafsiri tofauti kulingana na muktadha. Kwa kutoa IDs za kipekee, unahakikisha kuwa kila sehemu ya maandishi inatafsiriwa 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, login ya kichwa inaweza kutafsiriwa kama “Iniciar sesión”, na login ya chini inaweza kutafsiriwa kama “Acceder” kwa Kihispania.

Mbinu Bora