ಉನ್ನತ ಬಳಕೆ
ಬಲದಿಂದ ಎಡಕ್ಕೆ ಬರೆಯುವ ಭಾಷೆಗಳ ನಿರ್ವಹಣೆ
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
ಹೂಕ್ ಮಟ್ಟಗಳಲ್ಲಿ 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)}}
/>
);
}
ಬಹುಭಾಷೆಗಳು
ಒಂದು ಅನ್ವಯಿಕೆಯಲ್ಲಿ ಒಂದೇ ಸಮಯದಲ್ಲಿ ಹಲವಾರು ಭಾಷೆಗಳನ್ನು ಬೆಂಬಲಿಸಲು, ನೀವು ವಿಭಿನ್ನ 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ಗಳನ್ನು ನಿಯೋಜಿಸುವ ಮೂಲಕ, ಸ್ಟ್ರಿಂಗ್ನ ಪ್ರತಿ ಉದಾಹರಣೆಯನ್ನು ಅದರ ನಿರ್ದಿಷ್ಟ ಅರ್ಥದ ಪ್ರಕಾರ ನಿಖರವಾಗಿ ಅನುವಾದಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು.
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” ಎಂದು ಅನುವಾದವಾಗಬಹುದು.