উন্নত ব্যবহারের পদ্ধতি
ডান থেকে বাম ভাষাগুলি পরিচালনা করা
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';
// ...
}
অনুবাদ অক্ষম করা
একটি স্ট্রিংয়ের নির্দিষ্ট অংশের অনুবাদ নিষ্ক্রিয় করার জন্য বা নিশ্চিত করার জন্য যে কিছু অংশ যতটা সম্ভব অপরিবর্তিত থাকবে, আপনি ত্রৈমাসিক বর্গক্ষেত্র বন্ধনী ব্যবহার করতে পারেন। এই ফিচারটি নাম, প্রযুক্তিগত শব্দ, অথবা অন্য যেকোনো কন্টেন্টের আসল ফরম্যাট অক্ষুণ্ণ রাখার জন্য উপযোগী যা অনুবাদ করা উচিত নয়।
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
হুক স্তরে উভয়ই 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>
);
}
অনুবাদ আইডি ব্যবহার করা হচ্ছে
আপনি একই স্ট্রিংয়ের জন্য বিভিন্ন অনুবাদ বা অর্থ পরিচালনা করার জন্য Translate
কম্পোনেন্টে 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” অনূদিত হতে পারে।