Avancerad användning
Hantering av språk som skrivs från höger till vänster
TacoTranslate gör det enkelt att stödja höger-till-vänster (RTL) språk, som arabiska och hebreiska, i dina React-applikationer. Korrekt hantering av RTL-språk säkerställer att ditt innehåll visas på rätt sätt för användare som läser från höger till vänster.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
Du kan också använda den medföljande funktionen isRightToLeftLocaleCode
för att kontrollera det aktuella språket utanför React.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Inaktivera översättning
För att inaktivera översättning av specifika delar av en sträng, eller för att se till att vissa segment bevaras oförändrade, kan du använda tre hakparenteser. Denna funktion är användbar för att behålla det ursprungliga formatet för namn, tekniska termer eller annat innehåll som inte ska översättas.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
I det här exemplet kommer ordet “TacoTranslate” att förbli oförändrat i översättningen.
Flera TacoTranslate-leverantörer
Vi rekommenderar starkt att använda flera TacoTranslate
provider-komponenter i din app. Detta är användbart för att organisera dina översättningar och strängar i olika ursprung, till exempel i sidhuvudet, sidfoten eller i specifika avsnitt.
Du kan läsa mer om hur man använder origins här.
TacoTranslate
leverantörer ärver inställningar från eventuella överordnade leverantörer, så du behöver inte upprepa några andra inställningar.
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>
);
}
Åsidosätta origin eller locale
Utöver att använda flera TacoTranslate
providers kan du även åsidosätta både origin och locale på Translate
komponent- och useTranslation
hook-nivåer.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Hantering av laddningstillstånd
När du byter språk på klientsidan kan hämtningen av översättningar ta några ögonblick beroende på användarens uppkoppling. Du kan visa en laddningsindikator för att förbättra användarupplevelsen genom att ge visuell återkoppling under språkbytet.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Pluralisering
För att hantera pluralformer och visa räknebaserade etiketter korrekt på olika språk anses detta vara bästa praxis:
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)}}
/>
);
}
Flera språk
För att stödja flera språk samtidigt i samma applikation kan du använda flera TacoTranslate-leverantörer med olika locale
värden som visas nedan:
Du kan också åsidosätta locale
på komponent- eller hooknivå.
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>
);
}
Använda översättnings-ID:n
Du kan lägga till en id
i Translate
‑komponenten för att hantera olika översättningar eller betydelser för samma sträng. Detta är särskilt användbart när samma text kräver olika översättningar beroende på sammanhang. Genom att tilldela unika ID:n säkerställer du att varje förekomst av strängen översätts korrekt utifrån dess specifika betydelse.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Till exempel kan inloggningen i sidhuvudet översättas till “Iniciar sesión”, och inloggningen i sidfoten kan översättas till “Acceder” på spanska.