Belgeler: İleri Düzey Kullanım

Gelişmiş kullanım

Turkish

Sağa-soldan yazılan dilleri yönetme

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 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ışındaki bir yerde 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 metnin belirli kısımlarında çeviriyi devre dışı bırakmak veya bazı bölümlerin olduğu gibi korunmasını sağlamak için üçlü köşeli parantezleri kullanabilirsiniz. Bu özellik, adların, teknik terimlerin veya çevrilmemesi gereken diğer içeriklerin orijinal formatını korumak için yararlı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ı

Birden fazla TacoTranslate sağlayıcısını uygulamanızda kullanmanızı şiddetle teşvik ediyoruz. Bu, çevirilerinizi ve dizgilerinizi başlık, altlık veya belirli bölümler gibi farklı kökenlere ayırmak için faydalıdır.

You can burada kökenleri kullanma hakkında daha fazla bilgi edinebilirsiniz.

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

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şlemini yönetme

Kullanıcı tarafında diller değiştirilirken, ç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ının deneyimini artırmak için görsel geri bildirim sağlayarak bir yükleniyor göstergesi gösterebilirsiniz.

import {useTacoTranslate} from 'tacotranslate/react';

function Component() {
	const {isLoading} = useTacoTranslate();

	return (
		isLoading ? 'Translations are loading...' : null
	);
}

Çoğullaşma

Farklı dillerde çoğul kullanımı ve sayı bazlı etiketlerin doğru bir şekilde görüntülenmesi için 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 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:

Aynı zamanda locale değerini 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 için id ekleyebilirsiniz Translate bileşenine. Bu, aynı metnin bağlama göre farklı çeviriler gerektirdiği durumlarda özellikle faydalıdır. Eşsiz kimlikler atayarak, dize örneklerinin her birinin 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, header login “Iniciar sesión" olarak, ve footer login " Acceder" olarak İspanyolcaya çevrilebilir.

En iyi uygulamalar