ஆவணம்: மேம்பட்ட பயன்பாடு

மேம்பட்ட பயன்பாடு

Tamil

வலமிருந்து இடத்திற்கு எழுதப்படும் மொழிகளை கையாளுதல்

TacoTranslate உங்கள் React பயன்பாடுகளில் அரபியும் ஹீப்ருவும் போன்ற வலமிருந்து இடத்திற்கு (right-to-left, 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 ஹுக் நிலைகளில் மூலத்தையும் மொழி அமைப்பையும் இரண்டையும் மீறி அமைக்கலாம்.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

ஏற்றுதலை கையாளுதல்

கிளையன்ட் பக்கத்தில் மொழியை மாற்றும்போது, பயனரின் இணைய இணைப்பின் நிலையைப் பொறுத்து மொழிபெயர்ப்புகளை பெற சில நொடுகள் ஆகலாம். மாற்றத்தின் போது பார்வை மூலம் பின்னூட்டம் வழங்கி பயனர் அனுபவத்தை மேம்படுத்த நீங்கள் ஒரு லோடிங் குறியீட்டை (loading indicator) காட்டலாம்.

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-களை பயன்படுத்துதல்

நீங்கள் 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” என்றும் ஸ்பானிஷில் மொழிபெயர்க்கப்படலாம்.

சிறந்த நடைமுறைகள்