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

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

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

جمع سازی

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

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

بہترین طریقے