Nyaraka: Matumizi ya hali ya juu

Matumizi ya hali ya juu

Swahili

Kushughulikia lugha zinazosomwa kutoka kulia kwenda kushoto

TacoTranslate hufanya iwe rahisi kusaidia lugha zinazosomwa kutoka kulia kwenda kushoto (RTL), kama vile Kiarabu na Kiebrania, katika programu zako za React. Kushughulikia lugha za RTL kwa njia sahihi kunahakikisha kwamba maudhui yako yanaonyeshwa kwa usahihi kwa watumiaji wasomosoma 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 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 mfuatano wa maneno au kuhakikisha sehemu fulani zinahifadhiwa kama zilivyo, unaweza kutumia mabano matatu ya mraba triple square brackets. Kipengele hiki ni muhimu kwa kudumisha muundo wa awali 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” halitabadilika katika tafsiri.

Watoa huduma wengi wa TacoTranslate

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

Unaweza kusoma zaidi kuhusu kutumia asili hapa.

Watoa huduma wa TacoTranslate warithi mipangilio kutoka kwa mtoa huduma mzazi, kwa hivyo hautalazimika 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>
	);
}

Kubadili asili au eneo

Mbali na kutumia watoa huduma wengi wa TacoTranslate, pia unaweza kubadilisha asili na lugha kwenye viwango vya sehemu ya Translate na kigombo cha 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, kupata tafsiri kunaweza kuchukua muda kidogo kulingana na muunganisho wa mtumiaji. Unaweza kuonyesha kiashiria cha upakiaji 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
	);
}

Ubadilishaji wa wingi

Ili kushughulikia wingi na kuonyesha lebo zinazotegemea idadi 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 kusaidia lugha nyingi kwa wakati mmoja ndani ya programu hiyo hiyo, unaweza kutumia watoa huduma wengi wa TacoTranslate wenye thamani tofauti za locale kama ilivyoonyeshwa hapa chini:

Unaweza pia kubadilisha locale kwingi la kipengee au kiwango cha 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 sehemu ya Translate ili kushughulikia tafsiri tofauti au maana tofauti za mfululizo huo huo wa maneno. Hii ni muhimu hasa wakati maandishi hayo yanahitaji tafsiri tofauti kulingana na muktadha. Kwa kuweka id tofauti, unahakikisha kuwa kila tukio la mfululizo linatafsiriwa 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, kuingia kwenye kichwa cha ukurasa kunaweza kutafsiriwa kuwa “Iniciar sesión”, na kuingia kwenye sehemu ya chini kunaweza kutafsiriwa kuwa “Acceder” kwa Kihispania.

Mbinu bora