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

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

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

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