Dokumentacja: Zaawansowane użycie

Zaawansowane użycie

Polish

Obsługa języków pisanych od prawej do lewej strony

TacoTranslate ułatwia obsługę języków pisanych od prawej do lewej (RTL), takich jak arabski i hebrajski, w Twoich aplikacjach React. Właściwe obsługiwanie języków RTL zapewnia prawidłowe wyświetlanie treści 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 także użyć dostarczonej funkcji isRightToLeftLocaleCode do sprawdzenia aktualnego 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 tekstu lub zapewnić, że niektóre 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

Gorąco zachęcamy do korzystania z wielu dostawców TacoTranslate w Twojej aplikacji. Jest to przydatne do organizowania tłumaczeń i ciągów znaków w różnych źródłach, takich jak nagłówek, stopka lub konkretne sekcje.

Możesz przeczytać więcej o wykorzystaniu originów tutaj.

Dostawcy TacoTranslate dziedziczą ustawienia od dowolnego nadrzędnego dostawcy, więc nie będziesz musiał 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 pochodzenia lub lokalizacji

Oprócz korzystania z wielu dostawców TacoTranslate, możesz także nadpisać zarówno origin, jak i locale na poziomach 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, zapewniając wizualną informację zwrotną podczas przełączania.

import {useTacoTranslate} from 'tacotranslate/react';

function Component() {
	const {isLoading} = useTacoTranslate();

	return (
		isLoading ? 'Translations are loading...' : null
	);
}

Liczba mnoga

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 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>
	);
}

Używanie identyfikatorów tłumaczeń

Możesz dodać id do komponentu Translate w celu obsługi różnych tłumaczeń lub znaczeń dla tego samego ciągu znaków. Jest to szczególnie przydatne, 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 zostanie przetłumaczona dokładnie zgodnie z jej 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, nagłówek logowania może być przetłumaczony jako „Iniciar sesión”, a stopka logowania jako „Acceder” po hiszpańsku.

Najlepsze praktyki