دستاویزات: اعلیٰ درجے کا استعمال

Advanced usage

Urdu

Handling right-to-left languages

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';
	// ...
}

Disabling translation

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

import {Translate} from 'tacotranslate/react';

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

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

Multiple TacoTranslate providers

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

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

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

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

Overriding origin or locale

ایک سے زیادہ TacoTranslate فراہم کنندگان کے استعمال کے علاوہ، آپ Translate کمپونینٹ اور useTranslation ہُک کی سطحوں پر دونوں ماخذ (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" />
		</>
	);
}

Handling loading

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

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralization

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

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

Multiple languages

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

آپ locale کو کمپونینٹ یا ہک کی سطح پر بھی اووررائڈ کر سکتے ہیں۔

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

Using translation IDs

آپ id کو Translate کمپونینٹ میں شامل کر سکتے ہیں تاکہ ایک ہی سٹرنگ کے مختلف تراجم یا معانی کو سنبھالا جا سکے۔ یہ خاص طور پر اس وقت مفید ہے جب ایک ہی متن کو سیاق و سباق کی بنیاد پر مختلف تراجم کی ضرورت ہو۔ منفرد 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” کے طور پر ترجمہ ہو سکتا ہے۔

Best practices