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 maudhui yako yanaonyeshwa ipasavyo 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 kukagua 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 mnyororo au kuhakikisha sehemu fulani zihifadhiwe kama zilivyo, unaweza kutumia mabano matatu ya mraba. Kipengele hiki kinasaidia kudumisha 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.

Watoaji wa TacoTranslate kadhaa

Tunashauri sana kutumia watoa huduma kadhaa wa TacoTranslate katika programu yako. Hili ni muhimu kwa kupanga tafsiri zako na nyuzi za maandishi katika vyanzo tofauti, kama vile kichwa, sehemu ya chini, au sehemu maalum.

Soma zaidi kuhusu kutumia vyanzo hapa.

TacoTranslate watoaji hupokea mipangilio kutoka kwa mtoaji mzazi, hivyo hautalazimika kurudia mipangilio mingine.

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 eneo

Mbali na kutumia watoa huduma wengi wa TacoTranslate, unaweza pia kubadilisha asili na lugha kwenye ngazi za komponenti za Translate na ngazi za hook za 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 unabadilisha lugha 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 mchakato wa kubadilisha lugha.

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 lebo zinazoendana na 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 kuunga mkono lugha nyingi kwa wakati mmoja ndani ya programu moja, unaweza kutumia watoa huduma kadhaa za 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 komponenti ya Translate ili kushughulikia tafsiri tofauti au maana tofauti kwa kamba ile ile. Hii ni muhimu hasa wakati maandishi yale yale yanapotahitaji tafsiri tofauti kulingana na muktadha. Kwa kutenga vitambulisho vya kipekee, unahakikisha kwamba kila mfano wa kamba 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, kitufe la kuingia kwenye sehemu ya juu linaweza kutafsiriwa kama “Iniciar sesión”, na kitufe la kuingia kwenye sehemu ya chini linaweza kutafsiriwa kama “Acceder” kwa Kihispania.

Mazoea bora