Nyaraka: Matumizi ya Juu – TacoTranslate

Matumizi ya hali ya juu

Swahili

Kushughulikia lugha zinazosomeka kutoka kulia kwenda kushoto

TacoTranslate hufanya iwe rahisi kusaidia lugha za kutoka kulia kwenda kushoto (RTL), kama vile Kiarabu na Kihibrania, katika programu zako za React. Kushughulikia lugha za RTL kwa usahihi kuna hakikisha kuwa maudhui yako yanaonyeshwa vizuri 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 ya isRightToLeftLocaleCode iliyotolewa kuchunguza lugha ya sasa nje ya React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Kuzimwa kwa tafsiri

Ili kuzima tafsiri kwa sehemu maalum za mfuatano wa herufi au kuhakikisha sehemu fulani zinahifadhiwa kama zilivyo, unaweza kutumia mabano ya mraba matatu triple square brackets. Kipengele hiki ni muhimu kwa kudumisha 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” halitabadilika katika tafsiri.

Watoa huduma wengi wa TacoTranslate

Tunasisitiza kutumia watoa huduma wengi wa TacoTranslate katika programu yako. Hii ni ya msaada kwa kupanga tafsiri zako na mfululizo wa maneno katika asili tofauti, kama vile kichwa chako, mshipi, au sehemu maalum.

Unaweza kusoma zaidi kuhusu kutumia asili hapa.

Watoa huduma za TacoTranslate wanarithi mipangilio kutoka kwa mtoa huduma mzazi, kwa hivyo hautalazimika 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 asili au eneo

Mbali na kutumia watoa huduma wengi wa TacoTranslate, unaweza pia kubatilisha asili na eneo la lugha kwenye viwango vya sehemu ya Translate na 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

Unapobadilisha lugha upande wa mteja, kupakua tafsiri kunaweza kuchukua muda kidogo kulingana na muunganisho wa mtumiaji. Unaweza kuonyesha kiashiria cha upakuaji ili kuboresha uzoefu wa mtumiaji kwa kutoa maoni ya kuona wakati wa mabadiliko.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Umwisho wa wingi

Ili kushughulikia umoja na kuonyesha lebo za kuaminika kulingana na hesabu 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 kusaidia lugha nyingi wakati mmoja ndani ya programu ile ile, unaweza kutumia watoa huduma wengi wa TacoTranslate wenye thamani tofauti za locale kama inavyoonyesha hapa chini:

Unaweza pia kubatilisha locale kifunguo cha kipengele au kiwango cha 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 kwa kamba ile ile ya maneno. Hii ni muhimu hasa wakati maandishi yale yale yanahitaji tafsiri tofauti kulingana na muktadha. Kwa kuteua ID za kipekee, unahakikisha kuwa kila mara ya kamba hiyo imetafsiriwa 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, ingia kichwani inaweza kutafsiriwa kuwa “Iniciar sesión”, na ingia chini inaweza kutafsiriwa kuwa “Acceder” kwa Kihispania.

Mbinu bora