Dokumentasyon: Advanced usage

Advanced na paggamit

Filipino (Tagalog)

Paghawak ng mga wikang mula kanan-patungo-kaliwa

Pinapadali ng TacoTranslate ang pagsuporta sa mga lengguwaheng tama-pakang-kanan (RTL), tulad ng Arabic at Hebrew, sa iyong mga aplikasyon sa React. Ang tamang paghawak sa mga RTL na lengguwahe ay nagsisiguro na ang iyong nilalaman ay naipapakita nang wasto 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';
	// ...
}

Pag-disable ng pagsasalin

Upang hindi isalin ang mga partikular na bahagi ng isang string o upang matiyak na ang ilang segment ay mananatiling tulad ng orihinal, maaari mong gamitin ang triple square brackets. Ang tampok na ito ay kapaki-pakinabang para mapanatili ang orihinal na format ng mga pangalan, teknikal na termino, 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 nagbabago sa pagsasalin.

Maramihang mga provider ng TacoTranslate

Mahigpit naming inirerekomenda ang paggamit ng maramihang TacoTranslate providers sa iyong app. Ito ay kapaki-pakinabang para sa pag-aayos ng 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 mga pinagmulan dito.

Ang mga provider ng TacoTranslate ay namamana ng mga setting mula sa anumang parent provider, kaya hindi mo na kailangang ulitin pa ang ibang 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>
	);
}

Pagsusupil sa pinagmulan o locale

Bilang karagdagan sa paggamit ng maraming TacoTranslate provider, maaari mo ring i-override ang parehong origin at locale sa mga level ng Translate component at useTranslation hook.

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

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

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

Paghawak ng paglo-load

Kapag nagpapalit ng wika sa client side, maaaring tumagal ng ilang sandali ang pagkuha ng mga salin depende sa koneksyon ng gumagamit. Maaari kang magpakita ng loading indicator upang mapabuti ang karanasan ng gumagamit sa pamamagitan ng pagbibigay ng visual na feedback habang isinasagawa ang pagpapalit.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralisasyon

Para sa tamang paghawak ng pluralization at pagpapakita ng mga label batay sa bilang sa iba't ibang wika, ito ay itinuturing na pinakamahusay na gawi:

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 mga wika

Upang suportahan ang maramihang mga wika nang sabay-sabay sa loob ng parehong aplikasyon, maaari kang gumamit ng maraming TacoTranslate providers na may iba't ibang locale na mga halaga tulad 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 translation ID

Maaari kang magdagdag ng id sa Translate na component upang pamahalaan ang iba't ibang mga pagsasalin o kahulugan para sa iisang string. Ito ay partikular na kapaki-pakinabang kapag ang iisang teksto ay nangangailangan ng iba't ibang pagsasalin batay sa konteksto. Sa pamamagitan ng pagbibigay ng natatanging mga ID, tinitiyak mong ang bawat pagkakataon 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 header login ay maaaring isalin bilang “Iniciar sesión”, at ang footer login ay maaaring isalin bilang “Acceder” sa Espanyol.

Pinakamahuhusay na kasanayan