Dokumentaatio: Edistynyt käyttö

Edistynyt käyttö

Finnish

Oikealta vasemmalle kirjoitettavien kielten käsittely

TacoTranslate tekee oikealta vasemmalle (RTL) kirjoitettavien kielten, kuten arabian ja heprean, tukemisen React-sovelluksissasi helpoksi. RTL-kielten asianmukainen käsittely varmistaa, että sisältösi näytetään oikein käyttäjille, jotka lukevat oikealta vasemmalle.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Voit myös käyttää mukana toimitettua isRightToLeftLocaleCode-funktiota tarkistaaksesi nykyisen kielen React-ulkopuolella.

import {isRightToLeftLocaleCode} from 'tacotranslate';

function foo(locale = 'es') {
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	// ...
}

Käännösten poistaminen käytöstä

Jos haluat estää tiettyjen merkkijonon osien kääntämisen tai varmistaa, että tietyt osat säilyvät sellaisenaan, voit käyttää kolmoisia hakasulkeita. Tämä ominaisuus on hyödyllinen nimien, teknisten termien tai minkä tahansa muun sellaisen sisällön alkuperäisen muodon säilyttämisessä, jota ei tule kääntää.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

Tässä esimerkissä sana “TacoTranslate” pysyy muuttumattomana käännöksessä.

Useita TacoTranslate-palveluntarjoajia

Suosittelemme vahvasti, että sovelluksessasi käytetään useita TacoTranslate palveluntarjoajia. Tämä on hyödyllistä käännösten ja merkkijonojen järjestämisessä eri osioihin, kuten ylä- ja alatunnisteeseen tai muihin tiettyihin osiin.

Voit lukea täältä lisää originien hyödyntämisestä.

TacoTranslate providerit perivät asetukset miltä tahansa vanhemmalta providerilta, joten sinun ei tarvitse toistaa muita asetuksia.

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

Alkuperän tai kieliasetuksen ylikirjoittaminen

Useiden TacoTranslate -palveluntarjoajien käyttämisen lisäksi voit myös ohittaa sekä originin että localen Translate -komponentin ja useTranslation -hookin tasoilla.

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

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

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

Lataustilan käsittely

Kun kieli vaihdetaan asiakaspuolella, käännösten hakeminen voi kestää hetken käyttäjän yhteydestä riippuen. Voit näyttää latausilmaisimen parantaaksesi käyttökokemusta antamalla visuaalista palautetta vaihdon aikana.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Monikointi

Tätä pidetään parhaana käytäntönä monikoinnin käsittelyssä ja lukumäärään perustuvien tunnisteiden oikeassa näyttämisessä eri kielissä:

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

Useita kieliä

Tukeaksesi useita kieliä samanaikaisesti samassa sovelluksessa voit käyttää eri locale arvoja käyttäviä useita TacoTranslate-provider-instansseja, kuten alla on esitetty:

Voit myös ohittaa locale komponentti- tai hook-tasolla.

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

Käännöstunnisteiden käyttäminen

Voit lisätä id-attribuutin Translate-komponenttiin käsitelläksesi saman merkkijonon eri käännöksiä tai merkityksiä. Tämä on erityisen hyödyllistä, kun sama teksti vaatii eri käännöksiä kontekstista riippuen. Antamalla yksilölliset tunnisteet varmistat, että jokainen merkkijonon esiintymä käännetään täsmällisesti sen merkityksen mukaisesti.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Esimerkiksi yläosan kirjautuminen saattaa kääntyä ”Iniciar sesión”, ja alatunnisteen kirjautuminen saattaa kääntyä ”Acceder” espanjaksi.

Parhaat käytännöt