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

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

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 پرووائیڈرز استعمال کرنے کی سختی سے سفارش کرتے ہیں۔ یہ آپ کی ترجمہ شدہ عبارتوں اور سٹرنگز کو مختلف ماخذوں میں منظم کرنے کے لیے مفید ہے، جیسے کہ آپ کا ہیڈر، فوٹر، یا مخصوص سیکشن۔

آپ یہاں origins کے استعمال کے بارے میں مزید پڑھ سکتے ہیں۔

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 کو component یا hook کی سطح پر بھی override کر سکتے ہیں۔

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

مثال کے طور پر، ہیڈر لاگ ان کا ترجمہ “Iniciar sesión” ہو سکتا ہے، اور فوٹر لاگ ان کا ترجمہ سپینش میں “Acceder” ہو سکتا ہے۔

بہترین طریقے