ਦਸਤਾਵੇਜ਼: ਉੱਨਤ ਵਰਤੋਂ

ਉੱਨਤ ਵਰਤੋਂ

Punjabi

ਸੱਜੇ ਤੋਂ ਖੱਬੇ ਲਿਖਣ ਵਾਲੀਆਂ ਭਾਸ਼ਾਵਾਂ ਨੂੰ ਸੰਭਾਲਣਾ

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

ਕਈ ਭਾਸ਼ਾਵਾਂ

ਇੱਕੋ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਇਕੱਠੇ ਕਈ ਭਾਸ਼ਾਵਾਂ ਨੂੰ ਸਮਰਥਨ ਦੇਣ ਲਈ, ਤੁਸੀਂ ਵੱਖ-ਵੱਖ 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 ਦੀ ਵਰਤੋਂ

ਤੁਸੀਂ ਇੱਕ 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” ਅਨੁਵਾਦ ਹੋ ਸਕਦਾ ਹੈ।

ਉੱਤਮ ਅਭਿਆਸ