Edistynyt käyttö
Oikealta vasemmalle kirjoitettavien kielten käsittely
TacoTranslate helpottaa oikealta vasemmalle (RTL) luettavien kielten, kuten arabiankielen 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ää mukana toimitettua isRightToLeftLocaleCode
-funktiota tarkistaaksesi nykyisen kielen React-sovelluksen ulkopuolella.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Käännösten poistaminen käytöstä
Voit estää tiettyjen merkkijonon osien kääntämisen 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ä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 useiden TacoTranslate
providerien käyttöä sovelluksessasi. Tämä on hyödyllistä käännösten ja merkkijonojen järjestämisessä eri originien mukaan, esimerkiksi otsikkoon, alatunnisteeseen tai tiettyihin osioihin.
Voit lukea lisää originien hyödyntämisestä täältä.
TacoTranslate
-toimittajat perivät asetukset mistä tahansa ylätoimittajalta, 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 paikallisasetus
Monen TacoTranslate
tarjoajan käyttämisen lisäksi voit myös ohittaa sekä originin että lokalisaation Translate
komponentin ja useTranslation
koukun 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 kieltä vaihdetaan 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
Monikkomuotojen käsittelyn ja lukumäärään perustuvien tunnisteiden oikea näyttäminen eri kielissä 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 useita kieliä samanaikaisesti 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östunnusten käyttäminen
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 erilaisia käännöksiä kontekstista riippuen. Antamalla yksilöllisiä tunnisteita 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 kirjautumislinkki saattaa kääntyä “Iniciar sesión” ja alatunnisteen kirjautumislinkki saattaa kääntyä “Acceder” espanjaksi.