Photo by Sigmund on Unsplash

REACT LOCALIZATION

React Proje Mimarisi 25 — (Localization)

Bu blog yazısında Localization kümesinde ele aldığımız i18n (internationalization) konusununda deneme yapacağız.

i18n , “internationalization”. yazılım geliştirme bir ürünün veya uygulamanın farklı dilleri, kültürleri ve coğrafi bölgeleri desteklemesidir.

Bu süreç, web uygulamasının yerelleştirilmesine (localization) olanak tanır. Yerelleştirme, bir ürünü belirli bir dil veya kültür için uygun hale getirmeyi sağlar. Örneğin;

• metinlerin çevirisi,
• para birimi ve
• zaman formatının ayarlanması
• gibi işlemler yerelleştirmenin bir parçasıdır.

Bunun konuda 2 react kütüphanesi oldukça popüler kullanılmaktadır;

• i18Next
• FormatJS

Ben kendi projelerimde i18Next kütüphanesini kullanıyor olacağım. İlk örneğimiz dil çevirimi ile ilgili;

I18n

Bu örnekte sayfayı İngilizce kelimelerde oluşturduk..

https://onurdayibasi.dev/i18n-sample

Öncelikle i18next initialize etmemiz gerekiyor. Kaynakların içerisinde Türkçe ve İngilizce kelimeleri tek tek tanımlıyoruz. Aynı theme Light ve Dark Theme’de olduğu gibi..

import {initReactI18next} from 'react-i18next';

import i18n from 'i18next';

const resources = {
  en: {
    translation: {
      welcome: 'Welcome to our website!',
      about: 'About Us',
      contact: 'Contact Us',
      'change-language': 'Change Language',
    },
  },
  tr: {
    translation: {
      welcome: 'Web sitemize hoşgeldiniz!',
      about: 'Hakkımızda',
      contact: 'Iletişim',
      'change-language': 'Dili Değiştir',
    },
  },
};

i18n
  .use(initReactI18next) // Initializes i18n with react-i18next
  .init({
    resources,
    lng: 'en', // Default language (can be changed dynamically)
    interpolation: {
      escapeValue: false, // React already handles escaping
    },
  });

export default i18n;

Sonrasında sayfamızda i18n oluşturduğumuz const {t} = useTranslation(); fonksiyonu ile tüm textlerin aktif olan dildeki versiyonunu istiyoruz.

function MyWebPage() {
  const {t} = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>
        <a href="/about">{t('about')}</a> | <a href="/contact">{t('contact')}</a>
      </p>
      <div>Language : {i18n.language}</div>
      <button {t('change-language')}</button>
    </div>
  );
}

Son olarak dil değişikliğini ekleyelim . i18n üzerinden changeLanguage veya language erişerek mevcut dilin değişimini sağlıyoruz.

  const changeLanguage = () => {
    const lng = i18n.language;
    const lang = lng === 'en' ? 'tr' : 'en';
    i18n.changeLanguage(lang);
  };

Sonuçta Türkçe diline geçtiğimizde sayfanın Türkçe kelimelere dönüştüğünü görebilirsiniz.

https://onurdayibasi.dev/i18n-sample

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki(react-mimarisi) diğer yazılara erişmek için bu linke tıklayabilirsiniz.