دستاویزات: متقدم استعمال

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

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

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

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

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