દસ્તાવેજીકરણ: વિનમ્ર ઉપયોગ

ઉન્નત ઉપયોગ

Gujarati

જમણે થી જમણે ભાષાઓનું સંચાલન

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

અનુવાદ નિષ્ક્રિય કરવો

સૌઅનુવાદ માટે QString ના નિશ્ચિત ભાગો માટે અનુવાદને નિષ્ક્રિય કરવા અથવા કે કોઈ નિશ્ચિત ભાગો જાળવવાના માટે તમે ત્રિપલ સ્કવેર બ્રાકેટ્સ 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>
	);
}

અનુવાદ ID નો ઉપયોગ કરવો

તમે એક જ સ્ટ્રિંગ માટે વિવિધ અનુવાદો અથવા અર્થો સંભાળવા માટે Translate 컴્પોનન્ટમાં id ઉમેરishingiz શકો છો. જ્યારે સંદર્ભના આધારે એક જ ટેક્સટ માટે અલગ અનુવાદોની જરૂર હોય ત્યારે આ ખાસ ઉપયોગી છે. અનન્ય 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” થઈ શકે છે.

શ્રેષ્ઠ પ્રથાઓ