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

متقدم استعمال

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

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

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

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 ہک کی سطحوں پر اوریجن اور لوکیل دونوں کو اووررائیڈ بھی کر سکتے ہیں۔

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

جمع کی شکل

مختلف زبانوں میں جمع/واحد (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)}}
		/>
	);
}

متعدد زبانیں

ایک ہی ایپلیکیشن میں ایک ساتھ متعدد زبانوں کی حمایت کرنے کے لیے، آپ مختلف 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>
	);
}

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

آپ 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” ہسپانوی میں ترجمہ ہو سکتا ہے۔

بہترین طریقۂ کار