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, tukemisesta helppoa 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ää toimitettua 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ä

Jos haluat estää käännöksen merkkijonon tiettyjen osien osalta tai varmistaa, että tietyt kohdat säilyvät sellaisenaan, voit käyttää 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, että käytät sovelluksessasi useita TacoTranslate -provider-komponentteja. Tämä on hyödyllistä, kun järjestät käännöksiäsi ja merkkijonoja eri alkuperien mukaan, kuten sivun ylätunnisteeseen, alatunnisteeseen tai tiettyihin osioihin.

You can Lue lisää originien hyödyntämisestä täältä.

TacoTranslate providerit perivät asetukset miltä tahansa vanhemmalta providerilta, 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>
	);
}

Alkuperän tai kieliasetuksen ylikirjoittaminen

Useiden TacoTranslate -palveluntarjoajien 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

Kun vaihdat kieltä asiakaspuolella, käännösten hakeminen saattaa kestää hetken käyttäjän yhteyden nopeudesta riippuen. Voit näyttää latausindikaattorin 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
	);
}

Monikollistaminen

Monikon käsittelyn ja lukumäärään perustuvien tunnisteiden oikean näyttämisen varmistamiseksi eri kielissä pidetään tätä 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ä

Jos haluat tukea useita kieliä samanaikaisesti samassa sovelluksessa, voit käyttää useita TacoTranslate-palveluntarjoajia 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ö

Voit lisätä id -ominaisuuden Translate -komponenttiin käsitelläksesi saman tekstin eri käännöksiä tai merkityksiä. Tämä on erityisen hyödyllistä, kun sama teksti tarvitsee eri käännöksiä kontekstista riippuen. Antamalla yksilölliset ID:t varmistat, että jokainen esiintymä käännetään täsmällisesti sen merkityksen mukaan.

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ä espanjaksi “Acceder”.

Parhaat käytännöt