Nyaraka: Matumizi ya Juu – TacoTranslate

Matumizi ya hali ya juu

Swahili

Kushughulikia lugha zinazosoma kutoka kulia kwenda kushoto

TacoTranslate hufanya iwe rahisi kuunga mkono lugha zinazosomeka kutoka kulia kwenda kushoto (RTL), kama vile Kiarabu na Kiebrania, katika programu zako za React. Ushughulikiaji sahihi wa lugha za RTL huhakikisha kuwa maudhui 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 inayotolewa ya isRightToLeftLocaleCode ili kuangalia lugha ya sasa nje ya React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Kuzimika kwa tafsiri

Ili kuzima tafsiri kwa sehemu fulani za mfuatano wa herufi au kuhakikisha sehemu fulani zinahifadhiwa kama zilivyo, unaweza kutumia mabano matatu ya mviringo ya mstatili. Kipengele hiki ni muhimu kwa kuhifadhi 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” litaachwa kisibadilike 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 mikoa katika asili tofauti, kama vile kichwa, mguu wa ukurasa, au sehemu maalum.

Unaweza kusoma zaidi kuhusu kutumia origins hapa.

Watoa huduma wa TacoTranslate 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>
	);
}

Kuzidi chanzo au eneo

Mbali na kutumia watoa huduma wengi wa TacoTranslate, unaweza pia kubatilisha asili na eneo kwenye vipengele vya Translate na viwango vya kifungo 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, kupakua tafsiri kunaweza kuchukua muda mfupi 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
	);
}

Umoja wa wingi

Ili kushughulikia wingi na kuonyesha lebo zinazotegemea hesabu kwa usahihi katika lugha mbalimbali, 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 moja, unaweza kutumia watoa huduma wengi wa TacoTranslate na tofauti za locale kama inavyoonyeshwa hapa chini:

Unaweza pia kubadilisha locale kwa ngazi ya sehemu 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 za mfululizo ule ule wa maneno. Hii ni muhimu hasa wakati maandishi yale yale yanahitaji tafsiri tofauti kulingana na muktadha. Kwa kuteua IDs za kipekee, unahakikisha kila mfano wa mfululizo huo 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, kuingia kichwani kunaweza kutafsiriwa kama “Iniciar sesión”, na kuingia chini kunaweza kutafsiriwa kama “Acceder” kwa Kihispania.

Mila bora