Dokumentasi: Penggunaan lanjutan

Penggunaan lanjutan

Malay

Mengendalikan bahasa dari kanan ke kiri

TacoTranslate memudahkan sokongan bahasa kanan-ke-kiri (RTL), seperti Arab dan Ibrani, dalam aplikasi React anda. Pengendalian yang betul terhadap bahasa RTL memastikan kandungan anda dipaparkan dengan betul 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 isRightToLeftLocaleCode yang disediakan untuk memeriksa bahasa semasa di luar React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Melumpuhkan terjemahan

Untuk melumpuhkan terjemahan bagi bahagian tertentu dalam satu string atau untuk memastikan segmen tertentu dikekalkan seperti asal, anda boleh menggunakan tiga kurungan segi empat. Ciri ini berguna untuk mengekalkan format asal nama, istilah teknikal, atau sebarang kandungan lain yang tidak sepatutnya diterjemah.

import {Translate} from 'tacotranslate/react';

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

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

Berbilang penyedia TacoTranslate

Kami sangat menggalakkan penggunaan berbilang penyedia TacoTranslate dalam aplikasi anda. Ini berguna untuk mengatur terjemahan dan rentetan anda ke dalam asal yang berbeza, seperti kepala halaman, kaki halaman, atau bahagian tertentu.

Anda boleh baca lebih lanjut tentang menggunakan origins di sini.

Penyedia TacoTranslate mewarisi tetapan dari 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 asal atau lokaliti

Selain menggunakan pelbagai penyedia TacoTranslate, anda juga boleh menimpa kedua-dua origin dan locale pada komponen Translate serta peringkat 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" />
		</>
	);
}

Mengendalikan pemuatan

Apabila menukar bahasa di pihak klien, memuat turun terjemahan mungkin mengambil masa beberapa saat bergantung pada sambungan pengguna. Anda boleh memaparkan indikator pemuatan untuk meningkatkan pengalaman pengguna dengan memberikan maklum balas visual semasa pertukaran.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralisasi

Untuk mengendalikan pluralisasi dan memaparkan label berasaskan kiraan dengan betul dalam pelbagai bahasa, ini dianggap sebagai 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 serentak dalam aplikasi yang sama, anda boleh menggunakan pelbagai penyedia TacoTranslate dengan nilai locale yang berbeza seperti yang ditunjukkan di bawah:

Anda juga boleh menggantikan locale pada tahap 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 makna yang berbeza bagi string yang sama. Ini sangat berguna apabila teks yang sama memerlukan terjemahan yang berbeza berdasarkan konteks. Dengan memberikan ID yang unik, anda memastikan setiap contoh string 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 tajuk mungkin diterjemahkan kepada “Iniciar sesión”, dan log masuk kaki halaman mungkin diterjemahkan kepada “Acceder” dalam Bahasa Sepanyol.

Amalan terbaik