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

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

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

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

ترجمے کے آئی ڈیز کا استعمال کرنا

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

import {Translate} from 'tacotranslate/react';

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

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

مثال کے طور پر، header login کا ترجمہ سپینش میں “Iniciar sesión” ہو سکتا ہے، اور footer login کا ترجمہ “Acceder” ہو سکتا ہے۔

بہترین طریقے