Dokumentasyon: Advanced na paggamit

Advanced na paggamit

Filipino (Tagalog)

Pamamahala ng mga wikang mula kanan papuntang kaliwa

Pinapadali ng TacoTranslate ang pagsuporta sa mga wikang nagbabasa mula kanan papuntang kaliwa (RTL), gaya ng Arabe at Hebreo, sa iyong mga React na aplikasyon. Tinitiyak ng tamang paghawak ng mga RTL na wika na ipinapakita 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';
	// ...
}

Pagpapatigil sa pagsasalin

Upang huwag isalin ang mga partikular na bahagi ng isang string o upang matiyak na ang ilang bahagi ay mananatiling hindi nababago, maaari mong gamitin ang tatlong magkakasunod na square brackets. Kapaki-pakinabang ang tampok na ito para mapanatili ang orihinal na anyo ng mga pangalan, mga teknikal na termino, o anumang ibang 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 nababago sa pagsasalin.

Maramihang provider ng TacoTranslate

Mariin 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, tulad ng iyong header, footer, o mga partikular na seksyon.

Maaari kang magbasa pa tungkol sa paggamit ng mga pinagmulan dito.

Namamana ng mga provider ng TacoTranslate 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 provider, maaari mo ring i-override ang parehong origin at locale sa antas ng Translate na komponent at 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" />
		</>
	);
}

Pamamahala ng paglo-load

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

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralisasyon

Upang wastong hawakan ang pluralisasyon at maipakita nang tama ang mga label na nakabatay sa bilang sa iba't ibang wika, itinuturing itong 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)}}
		/>
	);
}

Maraming wika

Upang suportahan ang maraming wika nang sabay-sabay sa parehong aplikasyon, maaari kang gumamit ng maramihang TacoTranslate provider na may iba't ibang mga halaga ng locale 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 na komponent upang hawakan ang magkakaibang pagsasalin o kahulugan para sa parehong string. Partikular itong kapaki-pakinabang kapag ang parehong teksto ay nangangailangan ng magkakaibang pagsasalin batay sa konteksto. Sa pamamagitan ng pagtalaga ng mga natatanging ID, tinitiyak mong ang bawat halimbawa ng string ay maisasalin nang wasto 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.

Mga pinakamahusay na kasanayan