Dokumentaatio: Edistynyt käyttö

Edistynyt käyttö

Finnish

Oikealta vasemmalle käännettävien kielten käsittely

TacoTranslate tekee oikealta vasemmalle (RTL) kirjoitettavien kielten, kuten arabian ja heprean, tukemisesta helppoa React-sovelluksissasi. Oikea käsittely RTL-kielille varmistaa, että sisältösi näkyy 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äännöksen poistamiseksi käytöstä tiettyjen merkkijonon osien osalta tai varmistaaksesi, että tietyt osat säilyvät muuttumattomina, voit käyttää kolminkertaisia hakasulkuja. Tämä ominaisuus on hyödyllinen säilyttämään alkuperäinen muoto nimet, tekniset termit tai muu sisältö, 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 vahvasti käyttämään useita TacoTranslate -tarjoajia sovelluksessasi. Tämä on hyödyllistä käännösten ja merkkijonojen järjestämisessä eri alkuperiin, kuten ylätunnisteeseen, alatunnisteeseen tai tiettyihin osioihin.

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

TacoTranslate -tarjoajat perivät asetukset mistä tahansa yläpuoliselta tarjoajalta, 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ä originin että localen Translate komponentin ja useTranslation hookin 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 kieltä vaihdetaan asiakaspuolella, käännösten hakeminen saattaa kestää hetken käyttäjän yhteydestä 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äyttö

Monikkomuodon käsittelyyn ja lukuihin perustuvien nimikkeiden oikeaan näyttämiseen eri kielillä 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-palveluntarjoajia eri locale arvoilla seuraavasti:

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äminen

Voit lisätä id -attribuutin Translate -komponenttiin käsitelläksesi samaa merkkijonoa varten erilaisia käännöksiä tai merkityksiä. Tämä on erityisen hyödyllistä, kun sama teksti vaatii eri käännökset kontekstista riippuen. Asettamalla ainutlaatuiset ID:t varmistat, että jokainen merkkijonon esiintymä käännetään tarkasti sen erityisen 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 muotoon ”Iniciar sesión” ja alatunnisteen kirjautuminen muotoon ”Acceder”.

Parhaat käytännöt