Dokumentation: Avancerad användning

Avancerad användning

Swedish

Hantering av höger-till-vänster-språk

TacoTranslate gör det enkelt att stödja höger-till-vänster (RTL)-språk, såsom arabiska och hebreiska, i dina React-applikationer. Korrekt hantering av RTL-språk säkerställer att ditt innehåll visas korrekt 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 isRightToLeftLocaleCode funktionen 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 säkerställa att vissa segment bevaras som de är, kan du använda tre hakparenteser. Denna funktion är användbar för att behålla originalformatet för namn, tekniska termer eller annat innehåll som inte bör ö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 du använder flera TacoTranslate providerkomponenter i din app. Detta är användbart för att organisera dina översättningar och strängar i olika ursprung, såsom sidhuvud, sidfot eller specifika sektioner.

Du kan läsa mer om hur du använder ursprung här.

TacoTranslate providers ärver inställningar från en överordnad provider, så behöver du 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 ursprung eller lokalinställning

Förutom att använda flera TacoTranslate providers kan du också överstyra både origin och locale på komponentnivån för Translate och på hooknivån för useTranslation.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

Laddningshantering

När du byter språk på klientsidan kan det ta några ögonblick att hämta översättningarna, beroende på användarens uppkoppling. Du kan visa en laddningsindikator för att förbättra användarupplevelsen genom att ge visuell återkoppling under bytet.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralisering

För att hantera pluralformer och visa antalbaserade 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 enligt 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 headern översättas till “Iniciar sesión”, och inloggningen i footern kan översättas till “Acceder” på spanska.

Bästa praxis