மேம்பட்ட பயன்பாடுகள்
வலமிருந்து இடதுக்கு எழுதப்படும் மொழிகளை கையாளுதல்
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)}}
/>
);
}பல மொழிகள்
ஒரே பயன்பாட்டில் ஒரே நேரத்தில் பல மொழிகளை ஆதரிக்க, நீங்கள் பல 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>
);
}மொழிபெயர்ப்பு ID-களை பயன்படுத்துதல்
நீங்கள் id ஐ Translate காம்போனெண்ட்-க்கு சேர்க்கலாம், அப்படி செய்வதனால் ஒரே சரத்திற்கு வெவ்வேறு மொழிபெயர்ப்புகள் அல்லது அர்த்தங்களை கையாள முடியும். இது குறிப்பாக அதே உரை சூழ்நிலையின் அடிப்படையில் வெவ்வேறு மொழிபெயர்ப்புகளை வேண்டும்போது பயனுள்ளது. தனித்துவமான அடையாளங்களை ஒதுக்குவதன் மூலம், அந்த சரத்தின் ஒவ்வொரு நிகழ்வும் அதன் குறிப்பிட்ட அர்த்தத்திற்கு ஏற்ப துல்லியமாக மொழிபெயர்க்கப்படுவதை நீங்கள் உறுதி செய்யலாம்.
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” எனவும் மொழிபெயர்க்கப்படலாம்.