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

ઉન્નત ઉપયોગ

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

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

સ્ટ્રિંગના નક્કી ભાગો માટે અનુવાદ નિષ્ક્રિય કરવા અથવા કેટલાક વિભાગોને તેમજ તેમનું મૂળ સ્વરૂપ જ રાખવાની ખાતરી કરવા માટે, તમે triple square brackets નો ઉપયોગ કરી શકો છો. આ ફીચર નામો, ટેકનિકલ ટર્મ્સ અથવા અન્ય કોઈપણ સામગ્રીને મૂળ ફોર્મેટમાં જ રાખવા માટે ઉપયોગી છે જેનું અનુવાદ ન કરવું જોઈએ.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

આ ઉદાહરણમાં, શબ્દ “TacoTranslate” અનુવાદમાં બદલાશે નહીં.

એકથી વધારે TacoTranslate પ્રદાતાઓ

અમે તમારી એપમાં બહુવિધ TacoTranslate પ્રદાતાઓનો ઉપયોગ કરવાની ખાસ ભલામણ કરીએ છીએ. આ તમારા અનુવાદો અને સ્ટ્રિંગ્સને હેડર, ફૂટર અથવા ચોક્કસ વિભાગો જેવા વિવિધ ઓરીજિન્સમાં ગોઠવવા માટે ઉપયોગી છે.

તમે અહીં origins નો ઉપયોગ કેવી રીતે કરવો તે અંગે વધુ વાંચી શકો છો.

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

બહુભાષાઓ

એક જ એપ્લિકેશનમાં એકસાથે અનેક ભાષાઓને સમર્થન આપવા માટે, તમે નીચે બતાવ્યા મુજબ વિવિધ 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 નો ઉપયોગ

તમે idને 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” તરીકે અનુવાદિત થઈ શકે છે.

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