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

ઉન્નત ઉપયોગ

Gujarati

જમણા-થી-ડાબા ભાષાઓનું સંચાલન

TacoTranslate તમારા React એપ્લિકેશન્સમાં અરબી અને હિબ્રૂ જેવી જમણેથી ડાબે (right-to-left, 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 બંને ઓવરરાઇડ કરી શકો છો.

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”として અનુવાદિત થઈ શકે છે.

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