Dokumentacja: Zaawansowane użycie

Zaawansowane użycie

Polish

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. Właściwe wsparcie dla języków RTL zapewnia, że twoje treści będą wyświetlane poprawnie użytkownikom czytającym 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 dla konkretnych fragmentów tekstu lub upewnić się, że wybrane segmenty pozostaną niezmienione, możesz użyć potrójnych nawiasów kwadratowych. Ta funkcja jest przydatna do zachowania oryginalnego formatowania 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 znaków w różne źródła, takie jak nagłówek, stopka lub poszczególne sekcje.

Możesz dowiedzieć się więcej o wykorzystaniu originów.

TacoTranslate dostawcy dziedziczą ustawienia od dowolnego nadrzędnego dostawcy, więc nie trzeba będzie 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 originu lub ustawienia regionalnego

Oprócz używania wielu TacoTranslate dostawców, możesz także nadpisać zarówno origin (źródło), jak i locale (lokalę) 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 poprawnie obsługiwać liczebniki mnogie i wyświetlać etykiety zależne od liczby w różnych językach, zaleca się stosowanie następujących 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ć jednocześnie wiele języków w tej samej aplikacji, możesz skorzystać z 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>
	);
}

Używanie identyfikatorów tłumaczeń

Możesz dodać id do komponentu Translate, aby obsłużyć różne tłumaczenia lub znaczenia tej samej frazy. Jest to szczególnie przydatne, gdy ten sam tekst wymaga różnych tłumaczeń w zależności od kontekstu. Przypisując unikalne identyfikatory, zapewniasz, że każda instancja tej frazy zostanie przetłumaczona dokładnie zgodnie z jej 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 być przetłumaczone jako “Iniciar sesión”, a logowanie w stopce może być przetłumaczone jako “Acceder” po hiszpańsku.

Najlepsze praktyki