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

ഉന്നതമായ ഉപയോഗം

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

പരിഭാഷാ ഐഡികളുടെ ഉപയോഗം

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

മികച്ച രീതികൾ