Dokumentaatio: Edistynyt käyttö

Edistynyt käyttö

Finnish

Oikealta vasemmalle suunnattujen kielten käsittely

TacoTranslate tekee oikealta vasemmalle (RTL) -kielien, kuten arabian ja heprean, tukemisesta helppoa React-sovelluksissasi. Oikea RTL-kielien 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ää tarjottua isRightToLeftLocaleCode funktiota tarkistaaksesi nykyisen kielen React:n ulkopuolella.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

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

Kääntämisen poistamiseksi käytöstä tietylle osalle merkkijonoa tai varmistamaan, että tietyt osiot säilyvät muuttumattomina, voit käyttää kolmoista hakasulkujen merkintää. Tämä ominaisuus on hyödyllinen nimien, teknisten termien tai muun käännettävän sisällön alkuperäisen muodon säilyttämiseen.

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 käyttämään useita TacoTranslate -tarjoajia sovelluksessasi. Tämä on hyödyllistä käännösten ja merkkijonojen järjestämiseen eri alkuperiin, kuten otsikkoon, alatunnisteeseen tai tiettyihin osioihin.

Voit lukea lisää alkuperien hyödyntämisestä tästä.

TacoTranslate -tarjoajat perivät asetukset kaikilta ylätason tarjoajilta, 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>
	);
}

Ylikirjoita alkuperä tai kieliasetukset

Useiden TacoTranslate -toimittajien 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" />
		</>
	);
}

Latauksen käsittely

Kielen vaihtuessa asiakaspuolella käännösten hakeminen saattaa kestää hetken käyttäjän yhteyden nopeudesta riippuen. Voit näyttää latausindikaattorin parantaaksesi käyttökokemusta tarjoamalla visuaalista palautetta vaihdon aikana.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Monikkomuoto

Monikon käsittelyn ja lukupohjaisten tunnisteiden oikean näyttämisen eri kielillä katsotaan olevan paras käytäntö:

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ää useita TacoTranslate -tarjoajia eri locale -arvoilla, 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östunnusten käyttäminen

Voit lisätä id -attribuutin Translate -komponenttiin käsitelläksesi samaa merkkijonoa koskevia eri käännöksiä tai merkityksiä. Tämä on erityisen hyödyllistä, kun sama teksti vaatii eri käännöksiä kontekstista riippuen. Antamalla ainutlaatuiset ID:t varmistat, että jokainen merkkijonon esiintymä käännetään tarkasti sen erityisen 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 voi kääntyä muotoon “Iniciar sesión” ja alatunnisteen kirjautuminen muotoon “Acceder” espanjaksi.

Parhaat käytännöt