Dokümantasyon: Gelişmiş kullanım

Gelişmiş kullanım

Turkish

Sağdan sola yazılan dilleri işlemek

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

Verilen isRightToLeftLocaleCode fonksiyonunu, mevcut dili React dışında 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

Belirli bir dize bölümünün çevirisini devre dışı bırakmak veya belirli segmentlerin olduğu gibi korunmasını sağlamak için üçlü köşeli parantezleri kullanabilirsiniz. Bu özellik, adların, teknik terimlerin veya çevirilmemesi 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 dizelerinizi başlık, alt bilgi veya belirli bölümler gibi farklı kaynaklar halinde organize etmek için faydalıdır.

You can burada kökenlerin nasıl kullanılacağı hakkında daha fazla bilgi edinebilirsiniz.

TacoTranslate sağlayıcıları, herhangi bir üst sağlayıcıdan ayarları miras alır, bu yüzden 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ökeni 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 ayarı 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önetimi

Kullanıcı tarafında diller değiştirildiğinde, çevirilerin yüklenmesi 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ğul hale getirme

Farklı dillerde çoğullama ve sayı tabanlı etiketleri doğru bir şekilde göstermek için en iyi uygulama olarak kabul edilenler şunlardı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 eşzamanlı olarak 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 kimlikleri kullanarak

Bir id ekleyebilirsiniz Translate bileşenine, aynı string için farklı çevirileri veya anlamları yönetmek amacıyla. Bu, aynı metnin bağlama göre farklı çeviriler gerektirdiği durumlarda özellikle faydalıdır. Benzersiz kimlikler atayarak, stringin her bir örneğinin belirli anlamına göre doğru bir şekilde çevrileceğ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, header login “Iniciar sesión” olarak, ve footer login “Acceder” olarak İspanyolcaya çevrilebilir.

En iyi uygulamalar