Penggunaan lanjutan
Menangani bahasa dari kanan ke kiri
TacoTranslate memudahkan dukungan untuk bahasa yang menggunakan tulisan dari kanan ke kiri (RTL), seperti Arab dan Ibrani, dalam aplikasi React Anda. Penanganan yang tepat untuk 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 tetap dipertahankan apa adanya, Anda dapat menggunakan tanda kurung siku tiga kali. Fitur ini berguna untuk mempertahankan format asli dari 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 asal, seperti header, footer, atau bagian tertentu.
Anda dapat membaca lebih lanjut tentang memanfaatkan origin di sini.
Penyedia TacoTranslate
mewarisi pengaturan dari penyedia induk mana pun, jadi Anda tidak perlu mengulangi pengaturan lainnya.
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 mengubah asal dan lokal 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 mengganti bahasa di sisi klien, pengambilan terjemahan mungkin memerlukan beberapa saat tergantung pada koneksi pengguna. Anda dapat menampilkan indikator pemuatan untuk meningkatkan pengalaman pengguna dengan memberikan umpan balik visual selama proses pergantian.
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 sebagai 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 banyak bahasa sekaligus dalam aplikasi yang sama, Anda dapat menggunakan beberapa penyedia TacoTranslate dengan nilai locale
yang berbeda seperti ditunjukkan di bawah ini:
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 string yang sama. Ini sangat berguna ketika teks yang sama memerlukan terjemahan yang berbeda berdasarkan konteks. Dengan memberikan ID unik, Anda memastikan setiap instance dari string tersebut diterjemahkan dengan akurat sesuai dengan makna spesifiknya.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Sebagai contoh, header login mungkin diterjemahkan menjadi “Iniciar sesión”, dan footer login mungkin diterjemahkan menjadi “Acceder” dalam bahasa Spanyol.