Nyaraka: Matumizi ya juu – TacoTranslate

Matumizi ya juu

Swahili

Kushughulikia lugha zinazosomwa kutoka kulia hadi kushoto

TacoTranslate hufanya 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 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 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 maandishi au kuhakikisha sehemu fulani zinabaki kama zilivyo, unaweza kutumia mabano matatu ya mraba. Kipengele hiki kinasaidia kudumisha muundo asilia wa majina, istilahi za kiufundi, au maudhui mengine yoyote yasiyotakiwa kutafsiriwa.

import {Translate} from 'tacotranslate/react';

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

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

Watoaji wengi wa TacoTranslate

Tunapendekeza sana kutumia watoaji wengi wa TacoTranslate katika programu yako. Hii ni muhimu kwa ajili ya kupanga tafsiri zako na maneno (strings) katika vyanzo mbalimbali, kama vile kichwa, sehemu ya chini ya ukurasa (footer), au sehemu maalum.

Unaweza kusoma zaidi kuhusu kutumia vyanzo hapa.

TacoTranslate watoaji wanarithi mipangilio kutoka kwa mtoa 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 chanzo au lugha

Mbali na kutumia watoa huduma wengi wa TacoTranslate, unaweza pia kubadilisha asili na eneo la lugha (locale) kwenye ngazi za sehemu ya Translate na kwenye 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

Unapobadilisha lugha kwenye upande wa mteja, kupakua tafsiri kunaweza kuchukua sekunde chache 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
	);
}

Uwingi

Ili kushughulikia 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 kwa thamani tofauti za locale kama inavyoonyeshwa hapa chini:

Unaweza pia kubadilisha locale kwenye 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 sehemu ya Translate ili kushughulikia tafsiri au maana tofauti kwa maandishi yale yale. Hii ni muhimu hasa wakati maandishi yale yale yanahitaji tafsiri tofauti kulingana na muktadha. Kwa kuipa vitambulisho vya kipekee, unahakikisha kwamba kila mfano wa maandishi umetafsiriwa 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.

Miongozo bora