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 हुक स्तरांवर मूळ आणि स्थान दोन्ही ओव्हरराईड करू शकता.

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 providers वापरू शकता:

आपण देखील 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" />
	);
}

उदाहरणार्थ, header login चे भाषांतर स्पॅनिशमध्ये “Iniciar sesión” असे होऊ शकते आणि footer login चे भाषांतर “Acceder” असे होऊ शकते.

सर्वोत्तम सराव

Nattskiftet कडून एक उत्पादन