Zaawansowane użycie
Obsługa języków pisanych od prawej do lewej
TacoTranslate ułatwia obsługę języków zapisywanych od prawej do lewej (RTL), takich jak arabski i hebrajski, w Twoich aplikacjach React. Poprawne obsłużenie języków RTL zapewnia, że Twoje treści są wyświetlane prawidłowo dla użytkowników, którzy czytają od prawej do lewej.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
Możesz również użyć dostarczonej funkcji isRightToLeftLocaleCode
do sprawdzenia bieżącego języka poza React.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Wyłączanie tłumaczeń
Aby wyłączyć tłumaczenie określonych części ciągu tekstowego lub upewnić się, że pewne segmenty zostaną zachowane bez zmian, możesz użyć potrójnych nawiasów kwadratowych. Ta funkcja jest przydatna do zachowania oryginalnego formatu nazw, terminów technicznych lub innych treści, które nie powinny być tłumaczone.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
W tym przykładzie słowo “TacoTranslate” pozostanie niezmienione w tłumaczeniu.
Wielu dostawców TacoTranslate
Zdecydowanie zachęcamy do korzystania z wielu TacoTranslate
providerów w twojej aplikacji. Ułatwia to organizowanie tłumaczeń i tekstów w różnych źródłach, takich jak nagłówek, stopka czy konkretne sekcje.
Możesz dowiedzieć się więcej o korzystaniu z originów tutaj.
Providery TacoTranslate
dziedziczą ustawienia od każdego nadrzędnego providera, dzięki czemu nie trzeba będzie powtarzać innych ustawień.
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>
);
}
Nadpisywanie źródła lub lokalizacji
Oprócz korzystania z wielu dostawców TacoTranslate
, możesz także nadpisać zarówno źródło (origin), jak i lokalizację (locale) na poziomie komponentu Translate
oraz hooka useTranslation
.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Obsługa ładowania
Podczas zmiany języka po stronie klienta pobieranie tłumaczeń może zająć kilka chwil, w zależności od połączenia użytkownika. Możesz wyświetlić wskaźnik ładowania, aby poprawić doświadczenie użytkownika, zapewniając wizualną informację zwrotną podczas przełączania.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Pluralizacja
Aby prawidłowo obsługiwać pluralizację i wyświetlać etykiety zależne od liczby w różnych językach, uznaje się to za najlepszą praktykę:
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)}}
/>
);
}
Wiele języków
Aby obsługiwać wiele języków jednocześnie w tej samej aplikacji, możesz użyć wielu dostawców TacoTranslate z różnymi locale
wartościami, jak pokazano poniżej:
Możesz również nadpisać locale
na poziomie komponentu lub hooka.
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>
);
}
Korzystanie z identyfikatorów tłumaczeń
Możesz dodać id
do komponentu Translate
w celu obsługi różnych tłumaczeń lub znaczeń tej samej frazy. Jest to szczególnie przydatne, gdy ten sam tekst wymaga różnych tłumaczeń w zależności od kontekstu. Przydzielając unikalne ID, zapewniasz, że każda instancja tekstu zostanie przetłumaczona dokładnie zgodnie z jego konkretnym znaczeniem.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Na przykład logowanie w nagłówku może zostać przetłumaczone jako “Iniciar sesión”, a logowanie w stopce jako “Acceder” po hiszpańsku.