दस्तऐवज: प्रगत वापर

प्रगत वापर

Marathi

उजव्या ते डाव्या भाषा हाताळणी

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

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

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” असे होऊ शकते.

सर्वोत्तम पद्धती