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

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

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

متعدد زبانیں

ایک ہی ایپلیکیشن میں بیک وقت متعدد زبانوں کی حمایت کے لیے، آپ متعدد TacoTranslate پرووائیڈرز استعمال کر سکتے ہیں جن کی locale ویلیوز مختلف ہوں، جیسا کہ نیچے دکھایا گیا ہے:

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

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