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. Utunzaji sahihi wa lugha za RTL unahakikisha kwamba yaliyomo yameonyeshwa kwa usahihi 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 tafsiri kwa sehemu maalum za mfuatano wa herufi au kuhakikisha vipengele fulani vinahifadhiwa kama zilivyo, unaweza kutumia mabano matatu ya mraba. Kipengele hiki kinasaidia kuhifadhi muundo wa asili wa majina, istilahi za 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 mbalimbali za TacoTranslate

Tunakuhimiza sana kutumia watoa huduma wengi TacoTranslate katika programu yako. Hii ni muhimu kwa kupanga tafsiri zako na vifungu vya maandishi kwa vyanzo tofauti, kama vile kichwa chako, sehemu ya chini, au sehemu maalum.

Unaweza kusoma zaidi kuhusu jinsi ya 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" />
		</>
	);
}

Kushughulikia hali ya kupakia

Unapobadilisha lugha kwa upande wa mteja, kupakua tafsiri kunaweza 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 kubadilisha.

import {useTacoTranslate} from 'tacotranslate/react';

function Component() {
	const {isLoading} = useTacoTranslate();

	return (
		isLoading ? 'Translations are loading...' : null
	);
}

Uundaji wa wingi

Ili kushughulikia utofautishaji wa wingi na kuonyesha kwa usahihi lebo zinazotegemea idadi 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 hiyo hiyo, unaweza kutumia watoa huduma wengi wa TacoTranslate wenye 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 tofauti au maana tofauti kwa maandishi yale yale. Hili ni muhimu hasa wakati maandishi yale yale yanahitaji tafsiri tofauti kulingana na muktadha. Kwa kuwapa vitambulisho vya kipekee, unahakikisha kwamba kila tukio la maandishi limetafsiriwa 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, kitufe cha kuingia kwenye kichwa kinaweza kutafsiriwa kama “Iniciar sesión”, na kitufe cha kuingia kwenye sehemu ya chini kinaweza kutafsiriwa kama “Acceder” kwa Kihispania.

Miongozo bora