Dokumentasi: Penggunaan Lanjutan

Penggunaan Lanjutan

Indonesian

Menangani bahasa kanan-ke-kiri

TacoTranslate memudahkan dukungan untuk bahasa yang ditulis dari kanan ke kiri (RTL), seperti Bahasa Arab dan Ibrani, dalam aplikasi React Anda. Penanganan yang tepat terhadap bahasa RTL memastikan bahwa konten Anda ditampilkan dengan benar bagi 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 dapat menggunakan fungsi isRightToLeftLocaleCode yang disediakan untuk memeriksa bahasa saat ini di luar React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Menonaktifkan terjemahan

Untuk menonaktifkan terjemahan pada bagian tertentu dari sebuah string atau untuk memastikan segmen tertentu dipertahankan apa adanya, Anda dapat menggunakan tiga tanda kurung siku. Fitur ini berguna untuk menjaga format asli nama, istilah teknis, atau konten lain yang tidak boleh diterjemahkan.

import {Translate} from 'tacotranslate/react';

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

Dalam contoh ini, kata “TacoTranslate” akan tetap tidak berubah dalam terjemahan.

Beberapa penyedia TacoTranslate

Kami sangat menganjurkan penggunaan beberapa penyedia TacoTranslate dalam aplikasi Anda. Ini berguna untuk mengatur terjemahan dan string Anda ke dalam berbagai origin, seperti header, footer, atau bagian tertentu.

Anda dapat membaca lebih lanjut tentang pemanfaatan origins di sini.

TacoTranslate penyedia mewarisi pengaturan dari penyedia induk mana pun, sehingga Anda tidak perlu mengulangi pengaturan 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 beberapa penyedia TacoTranslate, Anda juga dapat menimpa baik origin maupun locale pada tingkat 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

Saat mengubah bahasa di sisi klien, pengambilan terjemahan mungkin membutuhkan beberapa saat tergantung pada koneksi pengguna. Anda dapat menampilkan indikator pemuatan untuk meningkatkan pengalaman pengguna dengan memberikan umpan balik visual selama pergantian bahasa.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralisasi

Untuk menangani pluralisasi dan menampilkan label berbasis jumlah dengan benar dalam berbagai bahasa, ini dianggap praktik 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)}}
		/>
	);
}

Beberapa bahasa

Untuk mendukung beberapa bahasa secara bersamaan dalam aplikasi yang sama, Anda dapat menggunakan beberapa penyedia TacoTranslate dengan nilai locale yang berbeda seperti ditunjukkan di bawah:

Anda juga dapat menimpa locale pada tingkat 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 dapat menambahkan id ke komponen Translate untuk menangani terjemahan atau makna yang berbeda untuk teks yang sama. Ini sangat berguna ketika teks yang sama memerlukan terjemahan yang berbeda berdasarkan konteks. Dengan memberikan ID unik, Anda memastikan bahwa setiap kemunculan teks tersebut diterjemahkan secara akurat sesuai makna spesifiknya.

import {Translate} from 'tacotranslate/react';

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

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

Misalnya, login di header mungkin diterjemahkan menjadi “Iniciar sesión”, dan login di footer mungkin diterjemahkan menjadi “Acceder” dalam bahasa Spanyol.

Praktik terbaik