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';
	// ...
}

अनुवाद अक्षम करणे

स्ट्रिंगच्या विशिष्ट भागांसाठी भाषांतर अक्षम करण्यासाठी किंवा विशिष्ट विभाग जसे आहेत तसे राखण्याची खात्री करण्यासाठी, तुम्ही तीन चौकोनी कोष्ठक (triple square brackets) वापरू शकता. हे वैशिष्ट्य नावे, तांत्रिक संज्ञा किंवा इतर कोणत्याही अशा सामग्रीचे मूळ स्वरूप जपण्यासाठी उपयुक्त आहे.

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

अनेक भाषा

एकाच अनुप्रयोगात एकाच वेळी अनेक भाषा समर्थित करण्यासाठी, आपण अनेक TacoTranslate प्रदाते वापरू शकता, खाली दाखवल्याप्रमाणे वेगवेगळ्या locale मूल्यांसह:

आपण 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 जोडू शकता जेणेकरून समान मजकूरासाठी वेगवेगळ्या अनुवादांना किंवा अर्थांना हाताळता येईल. हा विशेषतः उपयुक्त आहे जेव्हा एकाच मजकुराला संदर्भानुसार वेगवेगळे अनुवाद आवश्यक असतात. अद्वितीय 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” असे भाषांतर होऊ शकते.

उत्तम सराव

Nattskiftet कडूनचे उत्पादननॉर्वेत बनवले