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

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

Bengali

ডান-থেকে-বাম (RTL) ভাষাগুলি পরিচালনা

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

Origin বা locale ওভাররাইড করা

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

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” স্প্যানিশে।

সেরা অনুশীলনসমূহ