ഡോക്യുമെന്റേഷന്‍: അഡ്വാൻസഡ് ഉപയോഗം

അധുതര ഉപയോഗം

Malayalam

വലത്തുനിന്ന് ഇടത്തേക്ക് വരുന്ന ഭാഷകൾ കൈകാര്യം ചെയ്യൽ

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 പ്രൊവൈഡർമാർ ഉപയോഗിക്കാൻ ഞങ്ങൾ കൂടിയ ഉത്സാഹം പ്രദർശിപ്പിക്കുന്നു. ഇത് നിങ്ങളുടെ വിവർത്തനങ്ങൾക്കും സ്ട്രിംഗ്‌സിനും വിവിധ ഉറവിടങ്ങളായി, ഉദാഹരണത്തിന് നിങ്ങളുടെ ഹെഡർ, ഫൂട്ടർ, അല്ലെങ്കിൽ പ്രത്യേക വിഭാഗങ്ങൾ എന്നിങ്ങനെയാണ് ക്രമീകരിക്കാൻ ഉപകാരപ്രദമാണ്.

നിങ്ങൾക്ക് ഇവിടെ ഉറവിടങ്ങൾ ഉപയോഗിക്കുന്നത് സംബന്ധിച്ച കൂടുതൽ വായിക്കabilirsiniz.

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

തർജ്ജമ ഐഡിയുകൾ ഉപയോഗിക്കുന്നു

നിങ്ങൾക്ക് 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” എന്നായി പരിഭാഷപ്പെടും.

മികച്ച പ്രയോഗങ്ങൾ