Dokumentaatio: Edistynyt käyttö

Edistynyt käyttö

Finnish

Oikealta vasemmalle -kielten käsittely

TacoTranslate helpottaa oikealta vasemmalle (RTL) kirjoitettavien kielten, kuten arabian ja heprean, tukemista 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ää 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ä

Voit poistaa käännöksen käytöstä tiettyjen merkkijonon osien osalta tai varmistaa, että tietyt segmentit säilyvät muuttumattomina käyttämällä kolminkertaisia hakasulkuja. Tämä ominaisuus on hyödyllinen alkuperäisen muodon säilyttämiseen nimille, teknisille termeille tai muulle sisällölle, jota ei tule kääntää.

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 lämpimästi käyttämään useita TacoTranslate -palveluntarjoajia sovelluksessasi. Tämä on hyödyllistä kääntämisten ja merkkijonojen järjestämisessä eri alkuperiin, kuten ylä- ja alatunnisteeseen tai tiettyihin osioihin.

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

TacoTranslate -toimittajat perivät asetukset kaikilta vanhemmilta toimittajilta, 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 kieliasetus

Useiden TacoTranslate tarjoajien käytön lisäksi voit myös ohittaa sekä alkuperän että paikallisen asetuksen Translate komponentti- ja useTranslation hook-tasolla.

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 yhteydestä riippuen. Voit näyttää latausilmaisimen 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
	);
}

Monikkomuodot

Monikon käsittelemiseksi ja lukumääräpohjaisten nimikkeiden oikean näyttämisen varmistamiseksi eri kielissä tämä katsotaan parhaaksi käytännöksi:

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

Voit lisätä id -attribuutin Translate -komponenttiin käsitelläksesi eri käännöksiä tai merkityksiä samalle merkkijonolle. Tämä on erityisen hyödyllistä, kun sama teksti vaatii eri käännökset 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 yläosan kirjautuminen saattaa kääntyä espanjaksi muotoon “Iniciar sesión” ja alatunnisteen kirjautuminen muotoon “Acceder”.

Parhaat käytännöt