Dokümantasyon: Gelişmiş kullanım

Gelişmiş kullanım

Turkish

Sağdan sola yazılan 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 ele alınması, 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>
	);
}

Ayrıca sağlanan isRightToLeftLocaleCode işlevini, React dışında geçerli 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 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 biçimini korumak için faydalıdır.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

Bu örnekte, “TacoTranslate” kelimesi çeviri sırasında değişmeden kalacaktır.

Birden fazla TacoTranslate sağlayıcısı

Uygulamanızda birden fazla TacoTranslate sağlayıcısı kullanmanızı şiddetle teşvik ediyoruz. Bu, çevirilerinizi ve metinlerinizi başlık, altbilgi veya belirli bölümler gibi farklı kaynaklara göre düzenlemenize yardımcı olur.

Kaynakların kullanımı hakkında daha fazla bilgi için buraya tıklayın.

TacoTranslate sağlayıcıları herhangi bir üst sağlayıcıdan ayarları devralır, bu yüzden diğer ayarları tekrar belirtmek 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ı (locale) geçersiz kılma

Birden fazla TacoTranslate sağlayıcısı kullanmanın yanı sıra, Translate bileşen ve useTranslation hook düzeylerinde hem origin'i hem de locale'i 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 dili değiştirirken, çevirilerin alınması kullanıcının internet 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ğullaştırmayı yönetmek ve farklı dillerde sayıya dayalı etiketleri doğru şekilde göstermek için bu en iyi uygulamadır:

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 fazla dil

Aynı uygulama içinde birden fazla dili aynı anda desteklemek için, birden fazla TacoTranslate sağlayıcısı kullanabilirsiniz; bunlar aşağıda gösterildiği gibi farklı locale değerlerine sahip olabilir:

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ı dize için farklı çevirileri veya anlamları işlemek için Translate bileşenine id ekleyebilirsiniz. Bu, aynı metnin bağlama göre farklı çeviriler gerektirdiği durumlarda özellikle kullanışlıdır. Benzersiz ID'ler atayarak, dizenin her bir örneğinin özgün 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, üstbilgideki login İspanyolca'da “Iniciar sesión” olarak, altbilgideki login ise “Acceder” olarak çevrilebilir.

En iyi uygulamalar