Dokumentasyon: Mga advanced na paggamit

Advanced na paggamit

Filipino (Tagalog)

Paghawak ng mga wikang nakasulat mula kanan papuntang kaliwa

Pinapadali ng TacoTranslate ang pagsuporta sa mga wikang nakasulat mula kanan papuntang kaliwa (RTL), gaya ng Arabic at Hebrew, sa iyong mga React na aplikasyon. Tinitiyak ng wastong paghawak sa mga wikang RTL 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 function na isRightToLeftLocaleCode 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 partikular na bahagi ng isang string o upang matiyak na ang ilang bahagi ay mananatiling hindi binago, maaari mong gamitin ang tatlong magkakasunod na square brackets. Ang tampok na ito ay kapaki-pakinabang para mapanatili ang orihinal na anyo ng mga pangalan, teknikal na termino, o anumang ibang nilalaman na hindi dapat isalin.

import {Translate} from 'tacotranslate/react';

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

Sa halimbawa na ito, ang salitang “TacoTranslate” ay mananatiling hindi nababago sa pagsasalin.

Maramihang provider ng TacoTranslate

Lubos naming hinihikayat ang paggamit ng maramihang TacoTranslate providers sa iyong app. Kapaki-pakinabang ito para ayusin ang iyong mga pagsasalin at mga string sa iba't ibang pinagmulan, gaya ng iyong header, footer, o mga partikular na seksyon.

Maaari mong basahin pa ang tungkol sa paggamit ng mga origin 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

Bilang karagdagan sa paggamit ng maraming TacoTranslate providers, maaari mo ring i-override pareho ang origin at locale sa mga antas 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" />
		</>
	);
}

Pamamahala ng paglo-load

Kapag nagbabago ng wika sa client side, maaaring tumagal nang ilang sandali ang pagkuha ng mga pagsasalin depende sa koneksyon ng gumagamit. Maaari kang magpakita ng indikator ng paglo-load upang mapabuti ang karanasan ng gumagamit sa pamamagitan ng pagbibigay ng biswal na tugon habang isinasagawa ang pagbabago.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pagpaplural

Upang tamang pangasiwaan ang pluralisasyon at ang pagpapakita ng mga label na nakabase sa bilang sa iba't ibang wika, itinuturing ito bilang 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)}}
		/>
	);
}

Maraming wika

Upang suportahan ang maramihang wika nang sabay-sabay sa parehong aplikasyon, maaari mong gamitin ang maramihang TacoTranslate provider 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 ID ng pagsasalin

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

Mga pinakamahusay na kasanayan