అధునాతన వినియోగం
ఎడమ నుండి కుడికి మీళ్లు మాట్లాడే భాషలను నిర్వహించడం
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>
);
}
మీరు ప్రస్తుత భాషను React వద్ద బయట చూడడానికి అందించిన isRightToLeftLocaleCode
ఫంక్షన్ను కూడా ఉపయోగించవచ్చు.
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" />
</>
);
}
లోడింగ్ను నిర్వహించడం
క్లయింట్ వైపు భాషలను మార్చేటప్పుడు, అనువాదాలను తెప్పించుకోవడంలో వినియోగదారుడి కనెక్షన్పై ఆధారపడి కొంత సమయం పట్టవచ్చు. మార్పు సమయంలో వినియోగదారుని అనుభవాన్ని మెరుగుపరచేందుకు లోడింగ్ సూచికను చూపించవచ్చు.
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
ను జోడించవచ్చు, అదే స్ట్రింగ్కు భిన్న అనువాదాలు లేదా అర్థాలు నిర్వహించడానికి. అదే టెక్స్ట్ సందర్భం ఆధారంగా వివిధ అనువాదాలు అవసరమైనప్పుడు ఇది ప్రత్యేకంగా ఉపయోగకరంగా ఉంటుంది. ప్రత్యేక 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” గా స్పానిష్లో అనువదించబడవచ్చు.