Dokumentaatio: Edistynyt käyttö

Edistynyt käyttö

Finnish

Oikealta vasemmalle kirjoitettavien kielten käsittely

TacoTranslate tekee oikealta vasemmalle (RTL) -kielten, kuten arabian ja heprean, tukemisesta helppoa React-sovelluksissasi. 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ää annettua isRightToLeftLocaleCode -funktiota tarkistaaksesi nykyisen kielen Reactin 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ä tiettyjen merkkijonon osien kohdalla tai varmistamaan, että tietyt segmentit säilyvät alkuperäisinä, voit käyttää kolmoisia hakasulkuja. Tämä ominaisuus on hyödyllinen nimien, teknisten termien tai minkä tahansa muun käännettäväksi kelpaamattoman sisällön alkuperäisen muodon säilyttämisessä.

import {Translate} from 'tacotranslate/react';

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

Tässä esimerkissä sana ”TacoTranslate” säilyy muuttumattomana käännöksessä.

Useita TacoTranslate-palveluntarjoajia

Suosittelemme vahvasti käyttämään useita TacoTranslate -palveluntarjoajia sovelluksessasi. Tämä on hyödyllistä kääntämiesi tekstien ja merkkijonojen järjestämiseen eri alkuperien mukaan, kuten esimerkiksi otsikkoon, alatunnisteeseen tai tiettyihin osioihin.

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

TacoTranslate -tarjoajat perivät asetukset kaikilta yläpuolisilta 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 alue

Monien TacoTranslate -tarjoajien käytön lisäksi voit myös ohittaa sekä alkuperän että kielen 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 vaihdetaan kieltä asiakaspuolella, käännösten hakeminen saattaa kestää hetken käyttäjän yhteydestä riippuen. Voit näyttää latausindikaattorin parantaaksesi käyttäjäkokemusta antamalla visuaalista palautetta vaihdon aikana.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Monikon taivutus

Monikkomuotojen käsittelemiseksi ja lukupohjaisten 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 alla esitetyllä tavalla:

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ääntö-ID:iden käyttäminen

Voit lisätä id -ominaisuuden Translate komponenttiin käsitelläksesi erilaisia käännöksiä tai merkityksiä samalle merkkijonolle. Tämä on erityisen hyödyllistä, kun sama teksti vaatii eri käännöksiä kontekstista riippuen. Antamalla yksilölliset 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 otsikon kirjautuminen saattaa kääntyä espanjaksi muotoon ”Iniciar sesión” ja alatunnisteen kirjautuminen muotoon ”Acceder”.

Parhaat käytännöt