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

جدید استعمال

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

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

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” ہو سکتا ہے۔

بہترین طریقے