React uygulamanıza çoklu dil desteği (i18next) yapmak

React ile geliştirdiğiniz uygulamanızı, websitenizi yerelleştirmek için basit bir kütüphane olan i18next ‘i kullanabilirsiniz.  Yerelleştirmeden kastettiğimiz ülkelere göre dil seçimi, tarih biçimi vs değiştirmek. Bu kütüphane ile basit şekilde yapılabiliyor.  Basit bir örnekle gösterelim.

  1. Projemize kütüphaneyi ekleyelim
npm install i18next react-i18next --save

2. i18n.js adında sayfamızı oluşturalım

import i18n from "i18next";
import { useTranslation, initReactI18next } from "react-i18next";
i18n.use(initReactI18next)

.init({
    resources: {
        en: {
            translation: {
                "hi": "Welcome to Derinkod.com",
            }
        },
        tr: {
            translation: {
                "hi": "Derinkod.com'a hoş geldiniz",

            }
        }
    },
    lng: "tr",
    fallbackLng: "tr",
    interpolation: {
        escapeValue: false
    }
});
export default i18n;

3. App.js dosyamıza i18n dosyamızı bunu import edelim

import './common/i18n';

4. Kullanacağımız sayfamıza gelelim. Benim bu sayfamda örnek olsun diye bir selectbox var orada ing ve tr göre yukarıda hoş geldiniz yazılarını göstereceğim.

Gerekli eklemeleri yapalım

import  {useTranslation} from "react-i18next";

componente ekleyelim

const {t,i18n} = useTranslation();

şu alttaki benim select box’im

<Select
         labelId="demo-simple-select-label"
         id="demo-simple-select"
         value={tr}
         onChange={handleChange}
       >
         <MenuItem value={tr}>Türkçe</MenuItem>
         <MenuItem value={en}>İngilizce</MenuItem>
       </Select>

handleChange fonksiyonuna selecten seçtiğimiz value(tr,en) hangisiyse onu i18n fonksiyonuna gönderip. Dil değiştiriyoruz.

i18n.changeLanguage(event.target.value)

Ve son adım view de görmek için şu şekilde yazıyoruz

<p> {t("hi")} </p>

Aşağıda sonuç

Ben kısaca basit bir örnekle yaptım. Daha değişik kampsamlı kullanabilirsiniz.  Daha detaylı bilgi için kendi sitesini ziyaret edebilirsiniz https://react.i18next.com/

 

Bir cevap yazın