ਅਧੁਨਿਕ ਵਰਤੋਂ
ਸੱਜੇ ਤੋਂ ਖੱਬੇ ਭਾਸ਼ਾਵਾਂ ਨੂੰ ਸੰਭਾਲਣਾ
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>
);
}
ਤੁਸੀਂ ਮੌਜੂਦਾ ਭਾਸ਼ਾ ਨੂੰ React ਤੋਂ ਬਾਹਰ ਜਾਂਚਣ ਲਈ ਪ੍ਰਦਾਨ ਕੀਤਾ ਗਿਆ isRightToLeftLocaleCode
ਫੰਕਸ਼ਨ ਵੀ ਵਰਤ ਸਕਦੇ ਹੋ।
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
ਅਨੁਵਾਦ ਅਯੋਗ ਕਰਨਾ
ਇਕ ਸਤਰ ਦੇ ਵਿਸ਼ੇਸ਼ ਹਿੱਸਿਆਂ ਲਈ ਅਨੁਵਾਦ ਨੂੰ ਅਯੋਗ ਕਰਣ ਜਾਂ ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਨ ਲਈ ਕਿ ਕੁਝ ਹਿੱਸੇ ਅਜਿਹੇ ਹੀ ਰਹਿਣ, ਤੁਸੀਂ ਤਿੰਨ ਕੋਨੇ ਵਾਲੇ ਬ੍ਰੈਕਟ ( ) ਵਰਤ ਸਕਦੇ ਹੋ। ਇਹ ਵਿਸੇਸ਼ਤਾ ਨਾਮਾਂ, ਤਕਨੀਕੀ ਸ਼ਬਦਾਂ ਜਾਂ ਕਿਸੇ ਹੋਰ ਸਮੱਗਰੀ ਦੀ ਮੂਲ ਫਾਰਮੈਟਿੰਗ ਬਰਕਰਾਰ ਰੱਖਣ ਲਈ ਲਾਭਦਾਇਕ ਹੈ ਜੋ ਅਨੁਵਾਦ ਨਹੀਂ ਕੀਤੀ ਜانی ਚਾਹੀਦੀ।
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>
);
}
ਮੂਲ ਜਾਂ ਸਥਾਨਕਤਾ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨਾ
ਕਈ TacoTranslate
ਪ੍ਰਦਾਤਿਆਂ ਨੂੰ ਵਰਤਣ ਦੇ ਨਾਲ-ਨਾਲ, ਤੁਸੀਂ Translate
ਕੰਪੋਨੇਟ ਅਤੇ useTranslation
ਹੁਕ ਪੱਧਰਾਂ 'ਤੇ ਉਤਪੱਤੀ ਅਤੇ ਸਥਾਨਕਤਾ ਦੋਹਾਂ ਨੂੰ ਵੀ ਓਵਰਰਾਈਡ ਕਰ ਸਕਦੇ ਹੋ।
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)}}
/>
);
}
ਕਈ ਭਾਸ਼ਾਵਾਂ
ਇੱਕੋ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਕਈ ਭਾਸ਼ਾਵਾਂ ਦੇ ਸਮਰਥਨ ਲਈ, ਤੁਸੀਂ ਕਈ TacoTranslate
ਪ੍ਰੋਵਾਈਡਰਾਂ ਨੂੰ ਵੱਖ-ਵੱਖ locale
ਮੁੱਲਾਂ ਨਾਲ ਵਰਤ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਹੇਠਾਂ ਦਿਖਾਇਆ ਗਿਆ ਹੈ:
ਤੁਸੀਂ 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 ਦੀ ਵਰਤੋਂ ਕਰਨਾ
ਤੁਸੀਂ Translate
ਕੰਪੋਨੇਟ ਵਿੱਚ id
ਜੋੜ ਸਕਦੇ ਹੋ ਤਾਂ ਜੋ ਇਕੋ ਵਾਕ ਲਈ ਵੱਖ-ਵੱਖ ਅਨੁਵਾਦ ਜਾਂ ਮਤਲਬ ਸੰਭਾਲੇ ਜਾ ਸਕਣ। ਇਹ ਉਸ ਵੇਲੇ ਬਹੁਤ ਲਾਭਦਾਇਕ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਇਕੋ ਲਿਖਤ ਨੂੰ ਸੰਦਰਭ ਦੇ ਆਧਾਰ 'ਤੇ ਵੱਖ-ਵੱਖ ਅਨੁਵਾਦਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਵੱਖ-ਵੱਖ id ਦਿੰਦੇ ਹੋਏ, ਤੁਸੀਂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹੋ ਕਿ ਲਿਖਤ ਦਾ ਹਰ ਇੱਕ ਉਦਾਹਰਣ ਉਸਦੇ ਖ਼ਾਸ ਮਤਲਬ ਦੇ ਅਨੁਸਾਰ ਸਹੀ ਤਰ੍ਹਾਂ ਅਨੁਵਾਦਿਤ ਕੀਤਾ ਜਾਵੇ।
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” ਹੋ ਸਕਦਾ ਹੈ।