Dokumentaatio: Edistynyt käyttö

Edistynyt käyttö

Finnish

Oikealta vasemmalle kirjoitettavien kielten käsittely

TacoTranslate tekee oikealta vasemmalle (RTL) lukemista tukevien kielten, kuten arabian ja heprean, tuen React-sovelluksissasi helpoksi. Oikea käsittely RTL-kielille 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-kirjaston ulkopuolella.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

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

Jos haluat poistaa käännöksen käytöstä tiettyjen tekstin osien osalta tai varmistaa, että tietyt segmentit säilyvät muuttumattomina, voit käyttää kolmoisia hakasulkeita. Tämä ominaisuus on hyödyllinen nimien, teknisten termien tai muun 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 käyttämään useita TacoTranslate -palveluntarjoajia sovelluksessasi. Tämä on hyödyllistä käännösten ja merkkijonojen jäsentämisessä eri alkuperiin, kuten otsikkoon, alatunnisteeseen tai tiettyihin osioihin.

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

TacoTranslate -tarjoajat perivät asetukset mistä tahansa yläkäyttäjästä, 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

Monien TacoTranslate -tarjoajien käytön lisäksi voit myös ylikirjoittaa sekä alkuperän että kielialueen Translate -komponentin ja useTranslation -koukun 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

Kun kieliä vaihdetaan asiakaspuolella, käännösten hakeminen saattaa kestää hetken käyttäjän yhteydestä riippuen. Voit näyttää latausilmaisimen parantaaksesi käyttäjä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äsittelemiseksi ja lukumäärään perustuvien etikettien näyttämiseksi oikein eri kielillä tätä pidetään parhaana käytäntönä:

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-palveluntarjoajia eri locale arvoilla alla olevan esimerkin mukaisesti:

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 eri käännöksiä tai merkityksiä samalle merkkijonolle. Tämä on erityisen hyödyllistä, kun sama teksti vaatii eri käännöksiä kontekstista riippuen. Antamalla uniikit 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 saattaa kääntyä espanjaksi “Iniciar sesión” ja alatunnisteen kirjautuminen saattaa kääntyä “Acceder”.

Parhaat käytännöt