ഡോക്യുമെന്റേഷൻ: ഉന്നത ഉപയോഗം

ഉന്നത ഉപയോഗം

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

നിങ്ങൾക്ക് ഒറിജിനുകൾ ഉപയോഗിക്കുന്നതിനെക്കുറിച്ച് കൂടുതൽ വിവരങ്ങൾ ഇവിടെ വായിക്കാം.

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

പരിവർത്തന ഐഡികൾ ഉപയോഗിക്കുന്നത്

നിങ്ങൾക്ക് 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” ആയി വിവർത്തനം ചെയ്യപ്പെടാം.

മികച്ച പ്രവർത്തനരീതികൾ