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

অ্যাডভান্সড ব্যবহার

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 হুক স্তরে উভয় মূল উৎস এবং লোকেলও ওভাররাইড করতে পারেন।

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 যুক্ত করতে পারেন। এটি বিশেষত তখনই উপকারী যখন একই টেক্সট প্রসঙ্গের ভিত্তিতে বিভিন্ন অনুবাদ প্রয়োজন। অনন্য 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” স্প্যানিশে।

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