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) yazılan 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 düzgün 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>
	);
}

Sağlanan isRightToLeftLocaleCode işlevini React dışında mevcut dili kontrol etmek için de 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ümlerinde çeviriyi devre dışı bırakmak veya belirli segmentlerin 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 ç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 faydalıdır.

Origin'leri kullanmaya dair daha fazla bilgiyi buradan edinebilirsiniz.

TacoTranslate sağlayıcıları herhangi bir üst sağlayıcıdan ayarları devralır, bu nedenle diğer ayarları tekrarlamanıza gerek kalmaz.

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

Orijini veya yerel ayarı geçersiz kılma

Birden fazla TacoTranslate sağlayıcı kullanmanın yanı sıra, Translate bileşeni ve useTranslation hook düzeylerinde hem origin 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 ele alma

İ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 kullanıcıya görsel geri bildirim sağlamak 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

Farklı dillerde çoğullaştırmayı ve 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 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 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ı ele almak üzere Translate bileşenine id ekleyebilirsiniz. Bu, aynı metnin bağlama göre farklı çeviriler gerektirdiği durumlarda özellikle kullanışlıdır. Benzersiz kimlikler atayarak, dizenin her örneğinin özgül 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, üstbilgideki giriş İspanyolcada “Iniciar sesión” olarak, altbilgideki giriş ise “Acceder” olarak çevrilebilir.

En iyi uygulamalar