Penggunaan lanjutan
Mengendalikan bahasa yang ditulis dari kanan ke kiri
TacoTranslate memudahkan sokongan untuk bahasa yang membaca dari kanan ke kiri (RTL), seperti Arab dan Ibrani, dalam aplikasi React anda. Pengendalian yang betul bagi bahasa RTL memastikan kandungan anda dipaparkan dengan tepat kepada 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 menyahaktifkan terjemahan bagi bahagian tertentu dalam satu rentetan atau untuk memastikan segmen-segmen tertentu dikekalkan seperti asal, anda boleh menggunakan tiga kurungan petak. Ciri ini berguna untuk mengekalkan format asal nama, istilah teknikal, atau mana-mana kandungan lain yang tidak perlu diterjemahkan.
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 pelbagai penyedia TacoTranslate
dalam aplikasi anda. Ini berguna untuk mengatur terjemahan dan rentetan anda ke dalam asal-usul yang berbeza, seperti pengepala, pengaki, 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 lokal
Selain daripada menggunakan beberapa penyedia TacoTranslate
, anda juga boleh menimpa kedua-dua asal dan lokal pada komponen Translate
dan peringkat kait 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 sisi klien, mendapatkan terjemahan mungkin mengambil beberapa saat bergantung pada sambungan pengguna. Anda boleh memaparkan penunjuk 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 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 menulis ganti 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 makna yang berbeza bagi rentetan yang sama. Ini amat berguna apabila teks yang sama memerlukan terjemahan yang berbeza berdasarkan konteks. Dengan memberikan ID unik, anda memastikan setiap contoh rentetan diterjemahkan dengan tepat mengikut 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, login header mungkin diterjemahkan kepada “Iniciar sesión”, dan login footer mungkin diterjemahkan kepada “Acceder” dalam bahasa Sepanyol.