Dokumentaatio: Edistynyt käyttö

Edistynyt käyttö

Finnish

Oikealta vasemmalle kirjoitettavien kielten käsittely

TacoTranslate tekee helpoksi tukea oikealta vasemmalle (RTL) kirjoitettavia kieliä, kuten arabiaa ja hepreaa, React-sovelluksissasi. RTL-kielten asianmukainen käsittely varmistaa, että sisältösi näkyy 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-sovelluksen ulkopuolella.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

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

Voit poistaa käännöksen käytöstä merkkijonon tietyissä osissa tai varmistaa, että tietyt segmentit säilyvät muuttumattomina käyttämällä kolminkertaisia hakasulkeita. Tämä ominaisuus on hyödyllinen nimien, teknisten termien tai muun sellaisen sisällön alkuperäisen muodon säilyttämiseen, 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 tarjoajia sovelluksessasi. Tämä auttaa järjestämään käännöksiäsi ja merkkijonoja eri alkuperien mukaan, kuten ylätunnisteeseen, alatunnisteeseen tai tiettyihin osioihin.

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

TacoTranslate tarjoajat perivät asetukset kaikilta ylemmiltä 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>
	);
}

Originin tai paikallisasetuksen ohittaminen

Useiden TacoTranslate‑tarjoajien lisäksi voit myös ohittaa sekä originin että kieliasetuksen 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

Kun kieltä vaihdetaan 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
	);
}

Monikointi

Monikon käsittelyn ja lukumäärään perustuvien tunnisteiden oikean näyttämisen varmistamiseksi eri kielissä 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, kuten alla on esitetty:

Voit myös ylikirjoittaa 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 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öllisiä tunnisteita 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 voidaan kääntää muotoon “Iniciar sesión” ja alatunnisteen kirjautuminen muotoon “Acceder” espanjaksi.

Parhaat käytännöt