TacoTranslate
/
दस्तावेज़मूल्य निर्धारण
 
  1. परिचय
  2. शुरू करना
  3. सेटअप और कॉन्फ़िगरेशन
  4. TacoTranslate का उपयोग
  5. सर्वर-साइड रेंडरिंग
  6. उन्नत उपयोग
  7. सर्वोत्तम प्रथाएँ
  8. त्रुटि प्रबंधन और दोषनिवारण
  9. समर्थित भाषाएँ

उन्नत उपयोग

दाएँ-से-बाएँ भाषाओं का प्रबंधन

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 हुक स्तरों पर origin और locale दोनों को ओवरराइड भी कर सकते हैं।

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 कंपोनेंट में जोड़ सकते हैं ताकि एक ही स्ट्रिंग के विभिन्न अनुवादों या अर्थों को संभाला जा सके। यह विशेष रूप से तब उपयोगी होता है जब एक ही टेक्स्ट को संदर्भ के आधार पर अलग अनुवादों की आवश्यकता होती है। अद्वितीय ID असाइन करके आप सुनिश्चित करते हैं कि स्ट्रिंग के प्रत्येक उदाहरण का अनुवाद उसके विशिष्ट अर्थ के अनुसार सटीक रूप से किया जाए।

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” स्पेनिश में अनुवाद हो सकते हैं।

सर्वोत्तम प्रथाएँ

Nattskiftet का उत्पादनॉर्वे में निर्मित