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

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

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 প্রদানকারী ব্যবহারের জন্য দৃঢ়ভাবে উৎসাহ দিচ্ছি। এটি আপনার অনুবাদ এবং স্ট্রিংগুলোকে বিভিন্ন উৎসে সংগঠিত করার জন্য উপকারী, যেমন আপনার হেডার, ফুটার বা নির্দিষ্ট অংশসমূহ।

আপনি origins ব্যবহারের বিষয়টি সম্পর্কে এখানে আরও পড়তে পারেন।

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

একাধিক ভাষা

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

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” হিসেবে অনুবাদ হতে পারে।

সেরা অনুশীলন