Dokümantasyon: Gelişmiş kullanım

Gelişmiş kullanım

Turkish

Sağa sola dilli dillerin işlenmesi

TacoTranslate, React uygulamalarınızda Arapça ve İbranice gibi sağdan sola (RTL) dillerin desteklenmesini kolaylaştırır. RTL dillerinin düzgün bir şekilde işlenmesi, sağdan sola okuyan kullanıcılar için içeriğinizin doğru bir ş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, mevcut 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

Belirli bir dizedeki çeviriyi 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, 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 Fazla TacoTranslate Sağlayıcısı

Uygulamanızda birden fazla TacoTranslate sağlayıcısını kullanmanızı şiddetle tavsiye ederiz. Bu, çevirilerinizi ve metinlerinizi başlık, alt bilgi veya belirli bölümler gibi farklı kökenlere düzenlemek için kullanışlıdır.

Burada kullanım kökenleri hakkında daha fazla bilgi okuyabilirsiniz.

TacoTranslate sağlayıcıları, herhangi bir üst sağlayıcıdan ayarları miras alır, bu nedenle 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>
	);
}

Kaynağı veya yereli geçersiz kılma

Birden fazla TacoTranslate sağlayıcısı kullanmanın yanı sıra, Translate bileşeni ve useTranslation kancası seviyelerinde hem kökeni hem de yerel ayarları 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şlemini yönetme

Kullanıcı arayüzünde dilleri değiştirirken, çevirilerin alınması kullanıcının bağlantısına bağlı olarak birkaç dakika sürebilir. Değişim sırasında görsel geri bildirim sağlayarak kullanıcı deneyimini artırmak 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ğullama

Farklı dillerde çoğulculuğu ele almak ve sayı bazlı etiketleri doğru şekilde görüntülemek için bu en iyi uygulama olarak kabul edilmektedir:

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, farklı locale değerleri ile birden fazla TacoTranslate sağlayıcısı kullanabilirsiniz aşağıda gösterildiği gibi:

Ayrıca locale bileşen veya kanca 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 bir id ekleyebilirsiniz. Bu, aynı metnin bağlama göre farklı çeviriler gerektirdiği durumlarda özellikle faydalıdır. Benzersiz kimlikler atayarak, dizenin her örneğinin belirli anlamına göre doğru bir ş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, başlık girişi “Iniciar sesión” olarak çevrilebilir ve alt bilgi girişi İspanyolca “Acceder” olarak çevrilebilir.

En iyi uygulamalar