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

અદ્યતન ઉપયોગ

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

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-ઓનો ઉપયોગ

તમે 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” સ્પેનિશમાં.

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