Mafi kyawun mafita don internationalization (i18n) a cikin aikace-aikacen React

Yadda yake aiki

Shigar da kunshin TacoTranslate ta amfani da npm:

npm install tacotranslate

Da zarar kun girka module ɗin, za ku buƙaci ƙirƙirar asusun TacoTranslate, aikin fassara, da maɓallan API masu alaƙa. Ƙirƙiri asusu anan. Kyauta ne, kuma ba ya buƙatar ku saka katin bashi.

A cikin UI na aikace‑aikacen TacoTranslate, ƙirƙiri wani aikin, sannan ku je shafin API keys ɗinsa. Ƙirƙiri maɓalli ɗaya na read, da maɓalli ɗaya na read/write. Za mu adana su a matsayin canje‑canjen muhalli (environment variables). Maɓallin read shi muke kira public, kuma maɓallin read/write shi ne secret. Misali, za ku iya ƙara su cikin fayil .env a tushen (root) aikin ku.

Hakanan za ku buƙaci ƙara wasu ƙarin saitunan muhallin guda biyu: TACOTRANSLATE_DEFAULT_LOCALE da TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar yaren madadin ta tsoho. A wannan misalin, za mu saita ta zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “folder” inda za a ajiye rubutunku, misali URL na gidan yanar gizonku. Karanta ƙarin bayani game da origins anan.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Tabbatar kada a taɓa fallasa sirrin read/write maɓallin API ga muhallin samarwa a gefen abokin ciniki.

Saita TacoTranslate

Fara amfani da TacoTranslate a cikin aikace-aikacen React ɗinka ta hanyar nade shi cikin mai samar da mahallin (context provider) na TacoTranslate:

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

Yanzu za ku iya amfani da Translate sashi a ko'ina cikin aikace-aikacinku don nuna rubutun da aka fassara! Kada ku manta ku duba takardunmu don ƙarin bayani, da jagororin aiwatarwa na musamman ga saitinku.

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

Fa'idodin amfani da TacoTranslate

• Ajiye lokaci: Yana sarrafa aikin gajiyar na daidaita harshe da tattara kalmomi, yana ceton maka lokaci mai mahimmanci.
• Mai araha: Yana rage buƙatar fassarar hannu, yana rage farashin daidaita harshe.
• Ingantaccen daidaito: Fassarorin da AI ke samarwa suna tabbatar da sakamako masu daidaito bisa mahallin su da kuma inganci.
• Magani mai faɗaɗa: Kara tallafi ga sababbin harsuna cikin sauƙi yayin da aikace-aikacenka da tushen abokan ciniki ke haɓaka.

Fara a yau!

Aikace-aikacen React ɗinku za a fassara ta atomatik lokacin da kuka ƙara kowace rubutu a cikin Translate bangare. Lura cewa sai muhallin da ke da izinin read/write a kan maɓallin API ne kawai za su iya ƙirƙirar sabbin rubutu da za a fassara.

Muna ba da shawarar ku samu rufaffiyar kuma amintacciyar muhalli na gwaji inda za ku iya gwada aikace-aikacen samarwa ɗinku, ku ƙara sabbin rubutu kafin ku tura zuwa yanayi na kai tsaye. Wannan zai hana kowa kowa sata maɓallin API ɗinku na sirri, kuma zai iya sa aikin fassarar ku ya ƙaru da yawa ta hanyar ƙara rubutun banza.

Be sure to check out the complete examples over at our GitHub profile. If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Translate for free!