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ä

Voit poistaa käännöksen käytöstä tiettyjen merkkijonon osien kohdalla tai varmistaa, että tietyt osat säilyvät sellaisenaan, käyttämällä kolminkertaisia hakasulkeita. Tämä ominaisuus on hyödyllinen alkuperäisen muodon säilyttämisessä nimissä, teknisissä termeissä tai muussa sisällössä, jota ei pitäisi 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 lämpimästi käyttämään useita TacoTranslate-tarjoajia sovelluksessasi. Tämä helpottaa käännösten ja merkkijonojen järjestämistä eri alkuperien mukaan, kuten ylätunnisteeseen, alatunnisteeseen tai tiettyihin osioihin.

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

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

Alkuperän tai paikallisasetuksen ylikirjoittaminen

Useiden TacoTranslate providerien 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 vaihdetaan kieltä asiakaspuolella, käännösten hakeminen saattaa kestää muutaman hetken käyttäjän yhteyden nopeudesta 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
	);
}

Monikon käsittely

Monikoinnin käsittelyyn ja määrään perustuvien tunnisteiden oikeaan näyttämiseen eri kielissä tämä on paras käytäntö:

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‑tarjoajia 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östunnisteiden käyttö

Voit lisätä id 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ölliset ID:t varmistat, että jokainen merkkijonon esiintymä käännetään täsmällisesti sen tietyn 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 kirjautumislinkki voidaan kääntää muodoksi “Iniciar sesión” ja alatunnisteen kirjautumislinkki muodoksi “Acceder” espanjaksi.

Parhaat käytännöt