Dokumentasyon: Mga advanced na paggamit

Advanced na paggamit

Filipino (Tagalog)

Pangangasiwa ng mga wikang mula kanan papuntang kaliwa

Pinapadali ng TacoTranslate ang pagsuporta sa mga wikang nagsusulat mula kanan papuntang kaliwa (RTL), tulad ng Arabe at Hebreo, sa iyong mga React na aplikasyon. Tinitiyak ng wastong paghawak ng mga RTL na wika na maipapakita 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 function upang suriin ang kasalukuyang wika sa labas ng React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Pagpapahinto ng pagsasalin

Upang huwag isalin ang mga tiyak na bahagi ng isang string o upang matiyak na ang ilang bahagi ay mananatiling hindi nababago, maaari mong gamitin ang tatlong panaklong na parisukat. Ang tampok na ito ay kapaki-pakinabang para mapanatili ang orihinal na format ng mga pangalan, teknikal na termino, o anumang iba pang nilalamang hindi dapat isalin.

import {Translate} from 'tacotranslate/react';

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

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

Maramihang provider ng TacoTranslate

Lubos naming hinihikayat ang paggamit ng maramihang TacoTranslate providers sa iyong app. Nakakatulong ito sa pag-aayos ng iyong mga pagsasalin at mga string sa iba’t ibang pinagmulan, gaya ng iyong header, footer, o mga tiyak na seksyon.

Maaari mong 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 Pagkarga

Kapag binabago ang wika sa client-side, maaaring tumagal ng ilang sandali ang pagkuha ng mga salin depende sa koneksyon ng gumagamit. Maaari kang magpakita ng isang indikador ng paglo-load upang mapabuti ang karanasan ng gumagamit sa pamamagitan ng pagbibigay ng biswal na pahiwatig habang isinasagawa ang paglipat.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pagmamaramihan

Upang maayos na pangasiwaan ang pagmamaramí at wastong ipakita ang mga label na nakabatay sa bilang sa iba't ibang wika, itinuturing ito na pinakamainam 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 maramihang wika nang sabay-sabay sa iisang aplikasyon, maaari mong gumamit ng maraming TacoTranslate provider na may iba't ibang halaga ng locale, gaya ng ipinapakita sa ibaba:

Maaari mo ring i-override ang locale sa antas ng komponent 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 Translate component upang pamahalaan ang iba't ibang pagsasalin o kahulugan para sa parehong string. Kapaki-pakinabang ito lalo na kapag ang parehong teksto ay nangangailangan ng magkakaibang pagsasalin batay sa konteksto. Sa pamamagitan ng pagtatalaga ng mga natatanging ID, tinitiyak mo na ang bawat pagkakataon ng string ay maisasalin nang tama ayon sa partikular 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 isalin bilang “Iniciar sesión”, at ang login sa footer ay maaaring isalin bilang “Acceder” sa Espanyol.

Pinakamahusay na mga kasanayan