ડોક્યુમેન્ટેશન: અદ્યતન ઉપયોગ

ઉન્નત ઉપયોગ

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

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

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

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) બંનેને ઓવરરાઈડ (override) પણ કરી શકો છો.

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

અનુવાદ ID-ઓનો ઉપયોગ

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

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