Avanceret brug
Håndtering af højre-til-venstre-sprog
TacoTranslate gør det nemt at understøtte højre-til-venstre (RTL)-sprog, såsom arabisk og hebraisk, i dine React-applikationer. Korrekt håndtering af RTL-sprog sikrer, at dit indhold vises korrekt for brugere, der læser fra højre mod venstre.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
Du kan også bruge den medfølgende funktion isRightToLeftLocaleCode
til at kontrollere det aktuelle sprog uden for React.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Deaktivering af oversættelse
For at deaktivere oversættelse af specifikke dele af en streng eller for at sikre, at visse segmenter bevares uændrede, kan du bruge tredobbelte firkantede parenteser. Denne funktion er nyttig til at bevare det oprindelige format af navne, tekniske udtryk eller andet indhold, der ikke bør oversættes.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
I dette eksempel forbliver ordet “TacoTranslate” uændret i oversættelsen.
Flere TacoTranslate-udbydere
Vi opfordrer kraftigt til at bruge flere TacoTranslate
udbydere i din app. Dette er nyttigt til at organisere dine oversættelser og strenge i forskellige områder, såsom dit sidehoved, din sidefod eller specifikke sektioner.
Du kan læse mere om, hvordan du bruger origins her.
TacoTranslate
udbydere arver indstillinger fra enhver overordnet udbyder, så du behøver ikke at gentage andre indstillinger.
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>
);
}
Overskrivning af oprindelse eller lokalitet
Ud over at bruge flere TacoTranslate
udbydere, kan du også tilsidesætte både origin og locale på Translate
komponent- og useTranslation
hook-niveauer.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Håndtering af indlæsning
Når der skiftes sprog på klientsiden, kan det tage et par øjeblikke at hente oversættelser afhængigt af brugerens forbindelse. Du kan vise en indlæsningsindikator for at forbedre brugeroplevelsen ved at give visuel feedback under skiftet.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Pluralisering
For at håndtere pluralisering og korrekt vise etiketter, der afhænger af antal, på forskellige sprog, anses dette for bedste praksis:
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)}}
/>
);
}
Flere sprog
For at understøtte flere sprog samtidigt i den samme applikation, kan du bruge flere TacoTranslate-udbydere med forskellige locale
værdier, som vist nedenfor:
Du kan også overskrive locale
på komponent- eller hookniveau.
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>
);
}
Brug af oversættelses-id'er
Du kan tilføje en id
til Translate
komponenten for at håndtere forskellige oversættelser eller betydninger af den samme streng. Det er særligt nyttigt, når den samme tekst kræver forskellige oversættelser afhængigt af konteksten. Ved at tildele unikke id'er sikrer du, at hver forekomst af strengen bliver oversat korrekt i forhold til dens specifikke betydning.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
For eksempel kan login i headeren blive oversat til “Iniciar sesión”, og login i footeren kan blive oversat til “Acceder” på spansk.