டோகுமென்டேஷன்: மேம்பட்ட பயன்பாடு

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

Tamil

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

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

பரிமாற்ற ஐடிகளினைப் பயன்படுத்துதல்

நீங்கள் ஒரே சொற்றொடருக்கு வெவ்வேறு மொழிபெயர்ப்புகள் அல்லது அர்த்தங்களை கையாள Translate கூறுக்குள் id ஒன்றைச் சேர்க்கலாம். ஒரே உரை வாக்கியத்திற்கும் வேறுபட்ட உள்ளடக்கத்தின் அடிப்படையில் வெவ்வேறு மொழிபெயர்ப்புகள் தேவைப்படும் போது இது மிகவும் பயனுள்ளதாக இருக்கும். தனித்துவமான ID-களை வழங்குவதன் மூலம், அந்த சொற்றொடரின் ஒவ்வொரு தொடர்பும் அதன் குறிப்பிட்ட அர்த்தத்திற்கு துல்லியமாக மொழிபெயர்க்கப்படுவதை நீங்கள் உறுதி செய்கிறீர்கள்.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

உதாரணமாக, header login “Iniciar sesión” என்று மொழி பெயர்க்கும், மற்றும் footer login ஸ்பானிஷில் “Acceder” என்று மொழி பெயர்க்கப்படலாம்.

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