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

मुळ स्रोत (origin) किंवा स्थानिक सेटिंग (locale) ओव्हरराइड करणे

अनेक 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>
	);
}

अनुवाद आयडी वापरणे

तुम्ही समान स्ट्रिंगसाठी वेगवेगळे अनुवाद किंवा अर्थ हाताळण्यासाठी 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 कडून एक उत्पादननॉर्वेमध्ये बनवले