ਉੱਨਤ ਵਰਤੋਂ
ਖੱਬੇ-ਵੱਲ ਲਿਖਣ ਵਾਲੀਆਂ ਭਾਸ਼ਾਵਾਂ ਦਾ ਸੰਭਾਲ
TacoTranslate ਤੁਹਾਡੇ React ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਸੱਜੇ-ਤੋਂ-ਖੱਬੇ (RTL) ਭਾਸ਼ਾਵਾਂ, ਜਿਵੇਂ ਅਰਬੀ ਅਤੇ ਹੀਬ੍ਰੂ, ਦਾ ਸਮਰਥਨ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ। RTL ਭਾਸ਼ਾਵਾਂ ਦੀ ਸਹੀ ਤਰ੍ਹਾਂ ਸੰਭਾਲ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਕਿ ਉਹ ਵਰਤੋਂਕਾਰ ਜੋ ਸੱਜੇ ਤੋਂ ਖੱਬੇ ਵੱਲ ਪੜ੍ਹਦੇ ਹਨ, ਲਈ ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਠੀਕ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇ।
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
ਤੁਸੀਂ ਮੁਹੱਈਆ ਕੀਤਾ ਗਿਆ isRightToLeftLocaleCode
ਫੰਕਸ਼ਨ ਵੀ ਵਰਤ ਸਕਦੇ ਹੋ ਤਾਂ ਕਿ React ਤੋਂ باہر ਮੌਜੂਦਾ ਭਾਸ਼ਾ ਦੀ ਜਾਂਚ ਕੀਤੀ ਜਾ ਸਕੇ।
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
ਅਨੁਵਾਦ ਬੰਦ ਕਰਨਾ
ਕਿਸੇ ਟੈਕਸਟ ਦੇ ਨਿਰਧਾਰਤ ਹਿੱਸਿਆਂ ਲਈ ਅਨੁਵਾਦ ਬੰਦ ਕਰਨ ਜਾਂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਕੁਝ ਭਾਗ ਅਸਲ ਰੂਪ ਵਿੱਚ ਹੀ ਰਹਿਣ, ਤੁਸੀਂ triple square brackets ਵਰਤ ਸਕਦੇ ਹੋ। ਇਹ ਫੀਚਰ ਨਾਮਾਂ, ਤਕਨੀਕੀ ਸ਼ਬਦਾਂ ਜਾਂ ਕਿਸੇ ਹੋਰ ਸਮੱਗਰੀ ਦੀ ਮੂਲ ਫਾਰਮੈਟ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਣ ਲਈ ਲਾਭਦਾਇਕ ਹੈ, ਜਿਸਦਾ ਅਨੁਵਾਦ ਨਹੀਂ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ।
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਸ਼ਬਦ “TacoTranslate” ਅਨੁਵਾਦ ਵਿੱਚ ਬਦਲਿਆ ਨਹੀਂ ਜਾਵੇਗਾ।
ਕਈ TacoTranslate ਪ੍ਰਦਾਤਾਵਾਂ
ਅਸੀਂ ਤੁਹਾਡੇ ਐਪ ਵਿੱਚ ਕਈ TacoTranslate
ਪ੍ਰੋਵਾਈਡਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਤਾਕੀਦ ਕਰਦੇ ਹਾਂ। ਇਹ ਤੁਹਾਡੇ ਅਨੁਵਾਦਾਂ ਅਤੇ ਸਟਰਿੰਗਜ਼ ਨੂੰ ਵੱਖ-ਵੱਖ ਸਰੋਤਾਂ (ਉਦਾਹਰਨ: ਹੈਡਰ, ਫੁੱਟਰ ਜਾਂ ਖਾਸ ਭਾਗ) ਵਿੱਚ ਸੰਗਠਿਤ ਕਰਨ ਲਈ ਮਦਦਗਾਰ ਹੈ।
ਤੁਸੀਂ ਇੱਥੇ ਓਰਿਜਿਨਜ਼ ਦੀ ਵਰਤੋਂ ਬਾਰੇ ਹੋਰ ਪੜ੍ਹ ਸਕਦੇ ਹੋ।
TacoTranslate
ਪ੍ਰੋਵਾਈਡਰ ਕਿਸੇ ਵੀ ਪੈਰੈਂਟ ਪ੍ਰੋਵਾਈਡਰ ਤੋਂ ਸੈਟਿੰਗਾਂ ਵਿਰਾਸਤ ਵਜੋਂ ਲੈਂਦੇ ਹਨ, ਇਸ ਲਈ ਤੁਹਾਨੂੰ ਹੋਰ ਸੈਟਿੰਗਾਂ ਨੂੰ ਦੁਹਰਾਉਣ ਦੀ ਲੋੜ ਨਹੀਂ ਪਵੇਗੀ।
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>
);
}
Origin ਜਾਂ locale ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨਾ
ਇੱਕ ਤੋਂ ਵੱਧ TacoTranslate
ਪ੍ਰੋਵਾਇਡਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਇਲਾਵਾ, ਤੁਸੀਂ Translate
ਕੰਪੋਨੈਂਟ ਅਤੇ useTranslation
ਹੋਕ ਪੱਧਰਾਂ 'ਤੇ ਦੋਹਾਂ origin ਅਤੇ locale ਨੂੰ ਓਵਰਰਾਈਡ ਵੀ ਕਰ ਸਕਦੇ ਹੋ।
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
ਲੋਡਿੰਗ ਨੂੰ ਸੰਭਾਲਣਾ
ਕਲਾਇੰਟ ਸਾਈਡ 'ਤੇ ਭਾਸ਼ਾ ਬਦਲਦੇ ਸਮੇਂ, ਉਪਭੋਗਤਾ ਦੇ ਕਨੈਕਸ਼ਨ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹੋਏ ਅਨੁਵਾਦ ਲੈਣ ਵਿੱਚ ਕੁਝ ਸਮਾਂ ਲੱਗ ਸਕਦਾ ਹੈ। ਤੁਸੀਂ ਬਦਲਾਅ ਦੌਰਾਨ ਵਿਜ਼ੂਅਲ ਫੀਡਬੈਕ ਦੇ ਕੇ ਉਪਭੋਗਤਾ ਦੇ ਅਨੁਭਵ ਨੂੰ ਸੁਧਾਰਨ ਲਈ ਇੱਕ ਲੋਡਿੰਗ ਇੰਡਿਕੇਟਰ ਦਿਖਾ ਸਕਦੇ ਹੋ।
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
ਬਹੁਵਚਨੀਕਰਨ
ਵੱਖ-ਵੱਖ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ ਬਹੁਵਚਨ ਨੂੰ ਸੰਭਾਲਣ ਅਤੇ ਗਿਣਤੀ-ਅਧਾਰਿਤ ਲੇਬਲਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਦਰਸਾਉਣ ਲਈ, ਇਹ ਸਭ ਤੋਂ ਵਧੀਆ ਅਭਿਆਸ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ:
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)}}
/>
);
}
ਕਈ ਭਾਸ਼ਾਵਾਂ
ਇੱਕੋ ਹੀ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਇਕੱਠੇ ਕਈ ਭਾਸ਼ਾਵਾਂ ਦਾ ਸਮਰਥਨ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਹੇਠਾਂ ਦਰਸਾਏ ਗਏ ਵੱਖ-ਵੱਖ locale
ਮੁੱਲਾਂ ਨਾਲ ਕਈ TacoTranslate ਪ੍ਰੋਵਾਇਡਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ:
ਤੁਸੀਂ locale
ਨੂੰ ਵੀ ਕੰਪੋਨੈਂਟ ਜਾਂ ਹੁੱਕ ਲੈਵਲ 'ਤੇ ਓਵਰਰਾਈਡ ਕਰ ਸਕਦੇ ਹੋ।
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>
);
}
ਅਨੁਵਾਦ IDਆਂ ਦੀ ਵਰਤੋਂ
ਤੁਸੀਂ id
ਨੂੰ Translate
ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਜੋੜ ਸਕਦੇ ਹੋ ਤਾਂ ਜੋ ਇੱਕੋ ਸਟਰਿੰਗ ਲਈ ਵੱਖ-ਵੱਖ ਅਨੁਵਾਦ ਜਾਂ ਅਰਥ ਸੰਭਾਲੇ ਜਾ ਸਕਣ। ਇਹ ਖਾਸ ਤੌਰ 'ਤੇ ਉਪਯੋਗੀ ਹੈ ਜਦੋਂ ਇੱਕੋ ਟੈਕਸਟ ਨੂੰ ਸੰਦਰਭ ਅਨੁਸਾਰ ਵੱਖ-ਵੱਖ ਅਨੁਵਾਦਾਂ ਦੀ ਲੋੜ ਹੋਵੇ। ਅਨੋਖੇ IDs ਸੌਂਪਣ ਨਾਲ, ਤੁਸੀਂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹੋ ਕਿ ਸਟਰਿੰਗ ਦੇ ਹਰ ਨੁਸਖੇ ਨੂੰ ਉਸਦੇ ਖਾਸ ਅਰਥ ਅਨੁਸਾਰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਅਨੁਵਾਦ ਕੀਤਾ ਜਾਵੇ।
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
ਉਦਾਹਰਨ ਲਈ, ਹੈਡਰ ਲੌਗਿਨ ਨੂੰ ਸਪੇਨੀ ਵਿੱਚ “Iniciar sesión” ਅਤੇ ਫੂਟਰ ਲੌਗਿਨ ਨੂੰ ਸਪੇਨੀ ਵਿੱਚ “Acceder” ਵਜੋਂ ਅਨੁਵਾਦ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।