Dokumentasyon: Advanced na paggamit

Advanced na paggamit

Filipino (Tagalog)

Paghawak ng mga wikang sinusulat mula kanan papuntang kaliwa

Pinapadali ng TacoTranslate ang pagsuporta sa mga wika na nagsusulat mula kanan-pakaliwa (RTL), tulad ng Arabic at Hebrew, sa iyong mga React application. Tinitiyak ng wastong paghawak ng mga RTL na wika na naipapakita nang tama ang iyong nilalaman para sa mga gumagamit na nagbabasa mula kanan papuntang kaliwa.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Maaari mo ring gamitin ang ibinigay na isRightToLeftLocaleCode na function upang suriin ang kasalukuyang wika sa labas ng React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Hindi paganahin ang pagsasalin

Para huwag isalin ang partikular na bahagi ng isang string o upang matiyak na mananatiling hindi nababago ang ilang bahagi, maaari mong gamitin ang triple square brackets. Kapaki-pakinabang ang tampok na ito para mapanatili ang orihinal na format ng mga pangalan, mga terminong teknikal, o anumang iba pang nilalaman na hindi dapat isalin.

import {Translate} from 'tacotranslate/react';

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

Sa halimbawang ito, ang salitang “TacoTranslate” ay mananatiling hindi binago sa pagsasalin.

Maramihang provider ng TacoTranslate

Mahigpit naming hinihikayat ang paggamit ng maramihang TacoTranslate provider sa iyong app. Ito ay kapaki-pakinabang para ayusin ang iyong mga pagsasalin at mga string sa iba't ibang pinagmulan, tulad ng iyong header, footer, o mga partikular na seksyon.

Maaari kang magbasa pa tungkol sa paggamit ng origins dito.

Ang mga provider ng TacoTranslate ay namamana ang mga setting mula sa anumang magulang na provider, kaya hindi mo na kailangang ulitin ang iba pang mga setting.

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>
	);
}

Pag-override ng origin o locale

Bukod sa paggamit ng maraming TacoTranslate provider, maaari mo ring i-override ang parehong origin at locale sa antas ng Translate na component at ng useTranslation na hook.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

Pangangasiwa ng paglo-load

Kapag nagbabago ang wika sa client side, maaaring tumagal ng ilang sandali ang pagkuha ng mga pagsasalin depende sa koneksyon ng gumagamit. Maaari kang magpakita ng isang tagapagpahiwatig ng paglo-load upang mapabuti ang karanasan ng gumagamit sa pamamagitan ng pagbibigay ng biswal na feedback habang nagpapalit.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pagpaparami

Upang maayos na hawakan ang pluralisasyon at ipakita nang tama ang mga label na nakabatay sa bilang sa iba't ibang wika, itinuturing ito na pinakamahusay na kasanayan:

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)}}
		/>
	);
}

Maramihang wika

Upang suportahan ang maraming wika nang sabay-sabay sa parehong aplikasyon, maaari kang gumamit ng maraming provider ng TacoTranslate na may iba't ibang locale na mga halaga gaya ng ipinapakita sa ibaba:

Maaari mo ring i-override ang locale sa antas ng component o 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>
	);
}

Paggamit ng mga ID ng pagsasalin

Maaari kang magdagdag ng id sa komponenteng Translate upang pamahalaan ang magkakaibang pagsasalin o mga kahulugan para sa parehong string. Ito ay partikular na kapaki-pakinabang kapag ang parehong teksto ay nangangailangan ng magkakaibang pagsasalin batay sa konteksto. Sa pagtatalaga ng mga natatanging ID, tinitiyak mong ang bawat halimbawa ng string ay maisasalin nang tama ayon sa tiyak nitong kahulugan.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Halimbawa, ang login sa header ay maaaring maisalin bilang “Iniciar sesión”, at ang login sa footer ay maaaring maisalin bilang “Acceder” sa Espanyol.

Mga pinakamahusay na gawi