Gelişmiş kullanım
Sağdan sola dillerin yönetimi
TacoTranslate, React uygulamalarınızda Arapça ve İbranice gibi sağdan sola (RTL) dilleri desteklemeyi 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 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>
);
}
Mevcut dili React dışında kontrol etmek için sağlanan isRightToLeftLocaleCode
işlevini de kullanabilirsiniz.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Çeviriyi devre dışı bırakma
Bir dizenin belirli kısımlarının çevirisini devre dışı bırakmak veya belirli bölümlerin olduğu gibi korunmasını sağlamak için üçlü köşeli parantezleri kullanabilirsiniz. Bu özellik, isimlerin, teknik terimlerin veya çevrilmemesi gereken diğer içeriklerin orijinal formatını 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 Çok TacoTranslate Sağlayıcısı
Uygulamanızda birden fazla TacoTranslate
sağlayıcısı kullanmanızı şiddetle tavsiye ederiz. Bu, çevirilerinizi ve metinlerinizi başlık, altbilgi veya belirli bölümler gibi farklı kaynaklara göre düzenlemek için faydalıdır.
Kökenlerin kullanımı hakkında daha fazla bilgiyi buradan okuyabilirsiniz.
TacoTranslate
sağlayıcıları, herhangi bir üst sağlayıcıdan ayarları devralır, böylece diğer ayarları tekrar etmeniz gerekmez.
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ın üzerini yazma
Birden fazla TacoTranslate
sağlayıcısı kullanmanın yanı sıra, aynı zamanda Translate
bileşeninde ve useTranslation
hook seviyelerinde hem origin hem de locale ayarlarını 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üklemeyi yönetme
İstemci tarafında dil değiştirilirken, ç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 artırmak için bir yüklenme göstergesi görüntüleyebilirsiniz.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Çoğullaştırma
Çoğul eklerinin doğru yönetilmesi ve farklı dillerde sayı bazlı etiketlerin doğru şekilde gösterilmesi 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, aşağıda gösterildiği gibi farklı locale
değerlerine sahip birden fazla TacoTranslate sağlayıcısı kullanabilirsiniz:
Ayrıca locale
değerini bileşen veya hook seviyesinde 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ı dize için farklı çevirileri veya anlamları yönetmek üzere Translate
bileşenine id
ekleyebilirsiniz. Bu, aynı metnin bağlama göre farklı çevirilere ihtiyaç duyduğu durumlarda özellikle kullanışlıdır. Benzersiz kimlikler atayarak, dizenin her bir örneğinin belirli anlamına göre doğru şekilde çevrildiğinden emin olursunuz.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Örneğin, üstbilgi giriş “Iniciar sesión” olarak, altbilgi giriş ise İspanyolca’da “Acceder” olarak çevrilebilir.