అధునాతన వినియోగం
ఎడమ నుంచి కుడిలకు ఉన్న భాషల నిర్వహణ
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
ప్రొవైడర్లను ఉపయోగించాలని మేము తప్పక ప్రోత్సహిస్తాము. ఇది మీ అనువాదాలు మరియు స్ట్రింగ్స్ను వివిధ మూలాలుగా, ఉదాహరణకు మీ హెడర్, ఫుటర్ లేదా ప్రత్యేక విభాగాలుగా వ్యవస్థీకరించడానికి ఉపయోగపడుతుంది.
మీరు ఇక్కడ origins ఉపయోగించడం గురించి మరింత చదవవచ్చు.
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
ను జోడించవచ్చు. ఇది ప్రత్యేకంగా ఒకే పాఠ్యం సందర్భంపై ఆధారపడి వేర్వేరు అనువాదాలను అవసరం ఉన్నప్పుడు ఉపయోగకరం. ప్రత్యేక IDsని కేటాయించడం ద్వారా, మీరు ఆ స్ట్రింగ్ ప్రతి ఉదాహరణ తన విశిష్ట అర్థం ప్రకారం ఖచ్చితంగా అనువదించబడుతుందని హామీ ఇస్తారు.
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” గా స్పానిష్లో అనువదించబడవచ్చు.