डॉक्यूमेंटेशन: उन्नत उपयोग

उन्नत उपयोग

Hindi

दाएं से बाएं भाषाओं को संभालना

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

ओवरराइड करना origin या locale

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

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” हो सकता है।

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