Përdorim i avancuar
Trajtimi i gjuhëve nga e djathta në të majtë
TacoTranslate e bën të lehtë mbështetjen e gjuhëve nga e djathta në të majtë (RTL), si arabishtja dhe hebraishtja, në aplikacionet tuaja React. Trajtimi i duhur i gjuhëve RTL siguron që përmbajtja juaj të shfaqet saktë për përdoruesit që lexojnë nga e djathta në të majtë.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
Ju gjithashtu mund të përdorni funksionin e ofruar isRightToLeftLocaleCode
për të kontrolluar gjuhën aktuale jashtë React.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Çaktivizimi i përkthimit
Për të çaktivizuar përkthimin për pjesë specifike të një vargu ose për të siguruar që segmente të caktuara të ruhen ashtu si janë, mund të përdorni kllapa të trefishta katrore. Kjo veçori është e dobishme për të ruajtur formatin origjinal të emrave, termave teknikë, ose çdo përmbajtje tjetër që nuk duhet të përkthehet.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
Në këtë shembull, fjala “TacoTranslate” do të mbetet e pandryshuar në përkthim.
Një shumëfishues ofruesish të TacoTranslate
Ne inkurajojmë fuqishëm përdorimin e disa furnizuesve TacoTranslate
në aplikacionin tuaj. Kjo është e dobishme për organizimin e përkthimeve dhe stringjeve tuaja në origjina të ndryshme, si p.sh. kryeartikulli, fundi i faqes, ose seksione specifike.
Ju mund të lexoni më shumë rreth përdorimit të origjinave këtu.
Ofertuesit e TacoTranslate
trashëgojnë cilësimet nga çdo ofertues prind, kështu që nuk do të keni nevojë të përsërisni cilësime të tjera.
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>
);
}
Mbivendosja e origjinës ose vendndodhjes
Përveç përdorimit të shumë ofruesve TacoTranslate
, ju gjithashtu mund të mbivendosni si origjinën ashtu edhe lokalizimin në nivelet e komponentit Translate
dhe hook-ut useTranslation
.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Menaxhimi i ngarkimit
Kur ndryshoni gjuhët në anën e klientit, marrja e përkthimeve mund të marrë disa momente në varësi të lidhjes së përdoruesit. Mund të shfaqni një tregues duke ngarkuar për të përmirësuar përvojën e përdoruesit duke ofruar një reagim vizual gjatë ndërprerjes.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Pluralizimi
Për të trajtuar shumësimin dhe për të shfaqur etiketat bazuar në numrin në mënyrë korrekte në gjuhë të ndryshme, kjo konsiderohet praktikë më e mirë:
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)}}
/>
);
}
Gjuhë të ndryshme
Për të mbështetur shumë gjuhë njëkohësisht brenda të njëjtës aplikacion, ju mund të përdorni shumë furnizues TacoTranslate me vlera të ndryshme locale
siç tregohet më poshtë:
Ju gjithashtu mund të mbivendosni locale
në nivelin e komponentit ose hook-ut.
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>
);
}
Përdorimi i ID-ve të përkthimit
Ju mund të shtoni një id
në komponentin Translate
për të trajtuar përkthime ose kuptime të ndryshme për të njëjtën varg. Kjo është veçanërisht e dobishme kur i njëjti tekst kërkon përkthime të ndryshme bazuar në kontekst. Duke i dhënë ID unike, siguroheni që çdo rast i vargut të përkthehet saktë sipas kuptimit të tij specifik.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Për shembull, hyrja në krye mund të përkthehet në “Iniciar sesión”, dhe hyrja në fund mund të përkthehet në “Acceder” në spanjisht.