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

અદ્યતન ઉપયોગ

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 પ્રદાતાઓનો ઉપયોગ કરવા માટે જોરદાર પ્રોત્સાહન આપીએ છીએ. આ તમારા અનુવાદો અને સ્ટ્રિંગ્સને વિવિધ મૂળોમાં વૈવિધ્યપૂર્ણ રીતે સુવ્યવસ્થિત કરવાનાં માટે ઉપયોગી છે, જેમ કે તમારું હેડર, ફૂટર, અથવા નિર્ધારિત વિભાગો.

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

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

અનુવાદ IDs નો ઉપયોગ

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

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