Dokumentasi: Penggunaan Lanjutan

Penggunaan lanjutan

Malay

Menangani bahasa yang ditulis dari kanan ke kiri

TacoTranslate memudahkan sokongan untuk bahasa yang ditulis dari kanan ke kiri (RTL), seperti Arab dan Ibrani, dalam aplikasi React anda. Pengendalian bahasa RTL yang betul memastikan kandungan anda dipaparkan dengan tepat untuk pengguna yang membaca dari kanan ke kiri.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Anda juga boleh menggunakan fungsi yang disediakan isRightToLeftLocaleCode untuk menyemak bahasa semasa di luar React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Nyahaktifkan terjemahan

Untuk mematikan terjemahan bagi bahagian tertentu dalam sesuatu rentetan atau untuk memastikan segmen tertentu dikekalkan tanpa diubah, anda boleh menggunakan kurungan siku tiga. Ciri ini berguna untuk mengekalkan format asal nama, istilah teknikal, atau mana‑mana kandungan lain yang tidak sepatutnya diterjemahkan.

import {Translate} from 'tacotranslate/react';

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

Dalam contoh ini, perkataan “TacoTranslate” akan kekal tidak berubah dalam terjemahan.

Pelbagai penyedia TacoTranslate

Kami sangat menggalakkan penggunaan beberapa penyedia TacoTranslate dalam aplikasi anda. Ini berguna untuk menyusun terjemahan dan rentetan anda mengikut asal yang berbeza, seperti bahagian atas (header), bahagian bawah (footer), atau seksyen tertentu.

Anda boleh membaca lebih lanjut tentang penggunaan origins di sini.

TacoTranslate penyedia mewarisi tetapan daripada mana-mana penyedia induk, jadi anda tidak perlu mengulangi sebarang tetapan lain.

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

Menimpa origin atau locale

Selain menggunakan pelbagai penyedia TacoTranslate, anda juga boleh menggantikan kedua-dua asal dan lokal pada peringkat komponen Translate dan hook useTranslation.

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

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

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

Menangani Pemuatan

Apabila menukar bahasa pada sisi klien, memuat terjemahan mungkin mengambil beberapa ketika bergantung pada sambungan pengguna. Anda boleh memaparkan penunjuk pemuatan untuk meningkatkan pengalaman pengguna dengan memberikan maklum balas visual semasa pertukaran bahasa.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralisasi

Untuk mengendalikan pluralisasi dan memaparkan label berasaskan bilangan dengan betul dalam pelbagai bahasa, ini dianggap amalan terbaik:

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

Pelbagai bahasa

Untuk menyokong pelbagai bahasa secara serentak dalam aplikasi yang sama, anda boleh menggunakan pelbagai penyedia TacoTranslate dengan nilai locale yang berbeza seperti yang ditunjukkan di bawah:

Anda juga boleh menimpa locale pada peringkat komponen atau 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>
	);
}

Menggunakan ID terjemahan

Anda boleh menambah id pada komponen Translate untuk mengendalikan terjemahan atau maksud yang berbeza bagi rentetan yang sama. Ini amat berguna apabila teks yang sama memerlukan terjemahan berbeza bergantung kepada konteks. Dengan menetapkan ID unik, anda memastikan setiap contoh rentetan tersebut diterjemahkan dengan tepat mengikut makna khususnya.

import {Translate} from 'tacotranslate/react';

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

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

Sebagai contoh, log masuk pada kepala halaman mungkin diterjemahkan kepada “Iniciar sesión”, dan log masuk pada kaki halaman mungkin diterjemahkan kepada “Acceder” dalam bahasa Sepanyol.

Amalan terbaik