Zaawansowane użycie
Obsługa języków pisanych od prawej do lewej
TacoTranslate ułatwia obsługę języków pisanych od prawej do lewej (RTL), takich jak arabski i hebrajski, w Twoich aplikacjach React. Prawidłowe obsługiwanie języków RTL zapewnia, że Twoje treści są wyświetlane poprawnie dla użytkowników czytających 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łumaczenia
Aby wyłączyć tłumaczenie dla określonych części ciągu znaków lub aby zapewnić zachowanie niezmienionej określonych segmentów, można 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
Gorąco zachęcamy do korzystania z wielu dostawców TacoTranslate
w Twojej aplikacji. Jest to przydatne do organizowania Twoich tłumaczeń i ciągów tekstowych w różne źródła, takie jak nagłówek, stopka lub konkretne sekcje.
Możesz przeczytać więcej o wykorzystaniu origins tutaj.
Dostawcy TacoTranslate
dziedziczą ustawienia od dowolnego dostawcy nadrzędnego, więc nie musisz powtarzać żadnych 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 origin lub locale
Oprócz używania wielu dostawców TacoTranslate
, możesz także nadpisać zarówno origin, jak i 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ęzyków 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, dostarczając wizualną informację zwrotną podczas przełączania.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Odmiana przez liczby mnogie
Aby poprawnie obsługiwać liczbę mnogą i wyświetlać etykiety oparte na liczbie w różnych językach, uważa 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 wartościami locale
jak pokazano poniżej:
Możesz także 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>
);
}
Używanie identyfikatorów tłumaczeń
Możesz dodać id
do komponentu Translate
aby obsłużyć różne tłumaczenia lub znaczenia dla tego samego ciągu znaków. Jest to szczególnie użyteczne, gdy ten sam tekst wymaga różnych tłumaczeń w zależności od kontekstu. Przypisując unikalne ID, zapewniasz, że każda instancja ciągu jest tłumaczona dokładnie zgodnie z jego specyficznym 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, header login może zostać przetłumaczony jako „Iniciar sesión”, a footer login jako „Acceder” w języku hiszpańskim.