ডকুমেন্টেশন: উন্নত ব্যবহার

উন্নত ব্যবহার

Bengali

ডান-থেকে-বাম ভাষা পরিচালনা

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>
	);
}

অনুবাদ আইডি ব্যবহার

আপনি একই স্ট্রিংয়ের জন্য বিভিন্ন অনুবাদ বা অর্থ পরিচালনা করতে id কে 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” অনুবাদ হতে পারে।

সেরা অনুশীলন