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 vaivattomaksi React-sovelluksissasi. 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ää tarjottua isRightToLeftLocaleCode-funktiota tarkistaaksesi nykyisen kielen Reactin ulkopuolella.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

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

Voit poistaa käännöksen käytöstä tiettyjen merkkijonon osien osalta tai varmistaa, että tietyt osat säilyvät muuttumattomina käyttämällä kolmoisia hakasulkeita. Tämä ominaisuus on hyödyllinen alkuperäisen muodon säilyttämiseen esimerkiksi nimissä, teknisissä termeissä tai muussa sellaisessa sisällössä, 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 -provideria sovelluksessasi. Tämä on hyödyllistä käännösten ja merkkijonojen järjestämiseen eri originien mukaan, kuten ylä- tai alatunnisteeseen tai tiettyihin osioihin.

You can Voit lukea lisää originien käytöstä täältä.

TacoTranslate-tarjoajat perivät asetukset vanhemmiltaan, joten sinun ei tarvitse toistaa 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 kieli-/alueasetusten ohittaminen

Useiden TacoTranslate palveluntarjoajien käytön lisäksi voit myös ylikirjoittaa 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

Kun kieli vaihdetaan asiakaspuolella, käännösten hakeminen saattaa kestää hetken riippuen käyttäjän yhteydestä. 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
	);
}

Monikon käsittely

Monikoinnin käsittelyyn ja lukumäärään perustuvien tunnisteiden oikeaan näyttämiseen 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 useiden kielten samanaikaista käyttöä 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 Translate-komponenttiin käsitelläksesi saman merkkijonon erilaisia käännöksiä tai merkityksiä. Tämä on erityisen hyödyllistä, kun sama teksti tarvitsee eri käännöksiä kontekstista riippuen. Antamalla yksilölliset tunnisteet varmistat, että jokainen merkkijonon esiintymä käännetään täsmällisesti 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äreunan kirjautuminen saattaa kääntyä espanjaksi muotoon “Iniciar sesión”, ja alatunnisteen kirjautuminen saattaa kääntyä espanjaksi muotoon “Acceder”.

Parhaat käytännöt