Gelişmiş kullanım
Sağdan sola dillerle çalışma
TacoTranslate, React uygulamalarınızda Arapça ve İbranice gibi sağdan sola (RTL) diller için destek sağlamayı kolaylaştırır. RTL dillerinin doğru şekilde işlenmesi, içeriğinizin sağdan sola okuyan kullanıcılar için doğru şekilde görüntülenmesini sağlar.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
Ayrıca, sağlanan isRightToLeftLocaleCode
fonksiyonunu React dışındaki ortamlarda mevcut dili kontrol etmek için kullanabilirsiniz.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Çeviriyi devre dışı bırakma
Bir dizenin belirli bölümlerinin çevirisini devre dışı bırakmak veya belirli parçaların olduğu gibi korunmasını sağlamak için üçlü köşeli parantezleri kullanabilirsiniz. Bu özellik, adların, teknik terimlerin veya çevrilmemesi gereken diğer içeriklerin orijinal biçimini korumak için faydalıdır.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
Bu örnekte, “TacoTranslate” kelimesi çeviride değişmeden kalacaktır.
Birden fazla TacoTranslate sağlayıcısı
Uygulamanızda birden fazla TacoTranslate
sağlayıcısı kullanmanızı şiddetle tavsiye ediyoruz. Bu, çevirilerinizi ve metinlerinizi başlık, altbilgi veya belirli bölümler gibi farklı kaynaklara göre düzenlemek için kullanışlıdır.
Kaynakların kullanımına ilişkin daha fazla bilgiyi buradan okuyabilirsiniz.
TacoTranslate
sağlayıcıları herhangi bir üst sağlayıcıdan ayarları devralır, bu yüzden diğer ayarları tekrar etmek zorunda kalmazsınız.
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>
);
}
origin veya yerel ayarı geçersiz kılma
Birden fazla TacoTranslate
sağlayıcı kullanmanın yanı sıra, Translate
bileşeni ve useTranslation
hook seviyelerinde hem origin'i hem de yerel ayarı geçersiz kılabilirsiniz.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Yükleme durumunu yönetme
İstemci tarafında dili değiştirirken, çevirilerin getirilmesi kullanıcının bağlantısına bağlı olarak birkaç saniye sürebilir. Geçiş sırasında görsel geri bildirim sağlayarak kullanıcı deneyimini iyileştirmek için bir yükleme göstergesi kullanabilirsiniz.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Çoğullaştırma
Çoğullaştırmayı ele almak ve farklı dillerde sayıya dayalı etiketleri doğru şekilde görüntülemek için bu en iyi uygulama olarak kabul edilir:
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)}}
/>
);
}
Birden çok dil
Aynı uygulama içinde birden fazla dili aynı anda desteklemek için, birden fazla TacoTranslate sağlayıcısı kullanabilirsiniz ve aşağıda gösterildiği gibi farklı locale
değerlerine sahip:
Ayrıca locale
değerini bileşen veya hook düzeyinde geçersiz kılabilirsiniz.
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>
);
}
Çeviri kimliklerini kullanma
Aynı metin için farklı çeviriler veya anlamlar yönetmek amacıyla Translate
bileşenine id
ekleyebilirsiniz. Bu, aynı metnin bağlama göre farklı çeviriler gerektirdiği durumlarda özellikle faydalıdır. Benzersiz ID'ler atayarak, metnin her bir örneğinin özgün anlamına göre doğru şekilde çevrilmesini sağlarsınız.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Örneğin, başlıktaki giriş İspanyolca'da “Iniciar sesión” olarak, altbilgideki giriş ise “Acceder” olarak çevrilebilir.