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. Kushughulikia kwa usahihi lugha za RTL kunahakikisha kuwa yaliyomo 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 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 utafsiri kwa sehemu maalum za msururu wa herufi au kuhakikisha vipengele fulani vinabaki kama zilivyo, unaweza kutumia mabano matatu ya mraba. Kipengele hiki kinasaidia kuhifadhi muundo asilia wa majina, istilahi za kiufundi, au yaliyomo mengine yoyote ambayo hayapaswi kutafsiriwa.

import {Translate} from 'tacotranslate/react';

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

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

Watoa huduma mbalimbali za TacoTranslate

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

Unaweza soma zaidi kuhusu kutumia vyanzo hapa.

TacoTranslate watoa huduma wanarithi mipangilio kutoka kwa mtoa huduma mzazi yeyote, hivyo hautabidi 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>
	);
}

Kupitisha chanzo au eneo

Mbali na kutumia watoaji wengi wa TacoTranslate, unaweza pia kubadilisha chanzo na lugha kwenye ngazi za komponenti za 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" />
		</>
	);
}

Kusimamia upakiaji

Unapobadilisha lugha kwa upande wa mteja, upakuaji wa tafsiri unaweza kuchukua muda mfupi 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 matumizi ya wingi na kuonyesha lebo zinazotegemea idadi kwa usahihi katika lugha mbalimbali, hili linachukuliwa 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 hiyo hiyo, unaweza kutumia watoa huduma kadhaa wa TacoTranslate kwa thamani tofauti za locale kama ilivyoonyeshwa 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 kwa kifungu hicho. Hii ni muhimu hasa wakati maandishi yale yale yanahitaji tafsiri tofauti kulingana na muktadha. Kwa kupeana ID za kipekee, unahakikisha kuwa kila mfano wa kifungu 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, maandishi ya kuingia kwenye kichwa yanaweza kutafsiriwa kuwa “Iniciar sesión”, na maandishi ya kuingia kwenye futi yanaweza kutafsiriwa kuwa “Acceder” kwa Kihispania.

Mbinu bora