Dokümantasyon: Gelişmiş kullanım

Gelişmiş kullanım

Turkish

Sağdan sola dillerin yönetimi

TacoTranslate, React uygulamalarınızda Arapça ve İbranice gibi sağdan sola (RTL) 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 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>
	);
}

Ayrıca mevcut dili React dışından kontrol etmek için sağlanan isRightToLeftLocaleCode işlevini 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ümlerinin çevirisini devre dışı bırakmak veya bazı parçaların 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 formatını 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 Çok 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.

Kökenlerin kullanımı hakkında daha fazla bilgiyi buradan okuyabilirsiniz.

TacoTranslate sağlayıcıları, herhangi bir üst sağlayıcıdan ayarları devralır, bu nedenle başka ayarları tekrar etmenize gerek yoktur.

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ın üzerine yazma

Birden fazla TacoTranslate sağlayıcısı kullanmanın yanı sıra, Translate bileşeni ve useTranslation hook seviyelerinde hem origin hem de locale değerlerini de 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

İstemci tarafında dil değiştirildiğinde, çevirilerin alınması kullanıcının 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ükleniyor göstergesi gösterebilirsiniz.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Çoğullaştırma

Çoğul eklerini yönetmek ve farklı dillerde 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 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 Kimliklerinin Kullanımı

Aynı metin için farklı çevirileri veya anlamları yönetmek amacıyla 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, metnin her bir örneğinin özgün anlamına uygun şekilde doğru bir ş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, başlık giriş “Iniciar sesión” olarak çevrilebilirken, alt bilgi giriş “Acceder” olarak çevrilebilir İspanyolca’da.

En iyi uygulamalar