دستاویزات: ایڈوانس استعمال

ایڈوانس استعمال

Urdu

دائیں سے بائیں زبانوں کو سنبھالنا

TacoTranslate آپ کے React ایپلیکیشنز میں دائیں سے بائیں (RTL) زبانوں، جیسے عربی اور عبرانی، کی حمایت کو آسان بناتا ہے۔ RTL زبانوں کی مناسب ہینڈلنگ اس بات کو یقینی بناتی ہے کہ آپ کا مواد ان صارفین کے لیے درست طریقے سے ظاہر ہو جو دائیں سے بائیں پڑھتے ہیں۔

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

آپ موجودہ زبان چیک کرنے کے لیے فراہم کردہ isRightToLeftLocaleCode فنکشن کو React کے باہر بھی استعمال کر سکتے ہیں۔

import {isRightToLeftLocaleCode} from 'tacotranslate';

function foo(locale = 'es') {
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	// ...
}

ترجمہ کو غیر فعال کرنا

کسی سٹرنگ کے مخصوص حصوں کے ترجمے کو غیر فعال کرنے یا اس بات کو یقینی بنانے کے لئے کہ کچھ حصے ویسے کے ویسے محفوظ رہیں، آپ تین مربع بریکٹ triple square brackets استعمال کر سکتے ہیں۔ یہ فیچر ناموں، تکنیکی اصطلاحات، یا کسی بھی دیگر مواد کے اصل فارمیٹ کو برقرار رکھنے کے لیے مفید ہے جس کا ترجمہ نہیں کیا جانا چاہیے۔

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

اس مثال میں، لفظ “TacoTranslate” ترجمے میں بغیر تبدیلی کے رہے گا۔

کئی TacoTranslate فراہم کنندگان

ہم آپ کی ایپ میں متعدد TacoTranslate فراہم کنندگان کے استعمال کی انتہائی سفارش کرتے ہیں۔ یہ آپ کی تراجم اور سٹرنگز کو مختلف ماخذات میں منظم کرنے کے لیے مفید ہے، جیسے کہ آپ کا ہیڈر، فوٹر، یا مخصوص سیکشنز۔

آپ یہاں اصلیتوں کے استعمال کے بارے میں مزید پڑھ سکتے ہیں۔

TacoTranslate فراہم کنندگان کسی بھی والدین فراہم کنندہ سے ترتیبات وراثت میں لے جاتے ہیں، لہٰذا آپ کو کوئی دیگر ترتیبات دوہرانے کی ضرورت نہیں ہوگی۔

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

اصل یا مقام کو فوقیت دینا

ایک سے زیادہ TacoTranslate فراہم کنندگان کے استعمال کے علاوہ، آپ Translate کمپونینٹ اور useTranslation ہک کی سطحوں پر both origin اور locale کو بھی اووررائیڈ کر سکتے ہیں۔

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

لوڈنگ کا انتظام کرنا

جب کلائنٹ سائیڈ پر زبانیں تبدیل کی جائیں، تو ترجمے حاصل کرنے میں کچھ لمحے لگ سکتے ہیں جو صارف کے کنکشن پر منحصر ہوتا ہے۔ آپ سوئچ کے دوران بصری تاثرات فراہم کر کے صارف کے تجربے کو بہتر بنانے کے لیے لوڈنگ انڈیکیٹر دکھا سکتے ہیں۔

import {useTacoTranslate} from 'tacotranslate/react';

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

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

جمعیت

مختلف زبانوں میں جمع کے اصول کو سنبھالنے اور تعداد پر مبنی لیبلز کو صحیح طریقے سے دکھانے کے لیے، اسے بہترین طریقہ کار سمجھا جاتا ہے:

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

متعد زبانیں

ایک ہی ایپلیکیشن میں بیک وقت متعدد زبانوں کی حمایت کے لیے، آپ مختلف locale اقدار کے ساتھ متعدد TacoTranslate فراہم کنندگان استعمال کر سکتے ہیں جیسا کہ نیچے دکھایا گیا ہے:

آپ locale کو component یا hook کی سطح پر بھی override کر سکتے ہیں۔

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

ترجمہ آئی ڈیز کا استعمال

آپ Translate کمپونینٹ میں مختلف ترجمے یا معنی کے لیے ایک id شامل کر سکتے ہیں۔ یہ خاص طور پر اس وقت مفید ہوتا ہے جب ایک ہی متن کو سیاق و سباق کے مطابق مختلف ترجمے کی ضرورت ہو۔ منفرد IDs تفویض کر کے، آپ یقینی بناتے ہیں کہ اس سٹرنگ کا ہر مثال اپنے مخصوص معنی کے مطابق درست ترجمہ ہو۔

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

مثال کے طور پر، ہیڈر لاگ ان کا ترجمہ سپینش میں “Iniciar sesión” ہو سکتا ہے، اور فوٹر لاگ ان کا ترجمہ “Acceder” ہو سکتا ہے۔

بہترین طریقے