Dokümantasyon: Gelişmiş kullanım

Gelişmiş kullanım

Turkish

Sağdan sola dillerle başa çıkma

TacoTranslate, React uygulamalarınızda Arapça ve İbranice gibi sağdan sola (RTL) dillerini desteklemeyi kolaylaştırır. RTL dillerinin uygun ş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>
	);
}

Geçerli dili React dışında kontrol etmek için sağlanan isRightToLeftLocaleCode fonksiyonunu da kullanabilirsiniz.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Çeviriyi devre dışı bırakma

Bir dizgenin belirli bölümlerinin çevirisini devre dışı bırakmak veya belirli bölümlerin olduğu gibi korunmasını sağlamak için üçlü köşeli parantezler kullanabilirsiniz. Bu özellik, adlar, teknik terimler 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ştirilmeden kalacaktır.

Birden Fazla 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, alt bilgi veya belirli bölümler gibi farklı kökenlere göre düzenlemek için faydalıdır.

Orijinlerin 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 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>
	);
}

Köken veya yerel ayarı geçersiz kılma

Birden fazla TacoTranslate sağlayıcısı kullanmanın yanı sıra, aynı zamanda Translate bileşeni ve useTranslation kanca 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ükleme işleminin yönetilmesi

İstemci tarafında dili değiştirirken, çevirilerin alınması 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 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 kullanımı yönetmek ve farklı dillerde sayı bazlı etiketleri doğru şekilde göstermek 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 eş zamanlı olarak 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ı işlemek amacıyla Translate bileşenine bir id ekleyebilirsiniz. Bu, özellikle aynı metnin bağlama göre farklı çeviriler gerektirdiği durumlarda çok faydalıdır. Benzersiz kimlikler atayarak, dizenin her bir örneğinin özel 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, header login İspanyolca'da “Iniciar sesión” olarak, footer login ise “Acceder” olarak çevrilebilir.

En iyi uygulamalar