React Typescript Context i18n (Dil Desteği)

React Typescript Context i18n

Herkese merhabalar uygulamalarımıza dil desteği vermek isterken çeşitli üçüncü parti kütüphaneler kullanarak dil desteği vermek durumunda kalabiliyoruz.Bu yazımızda ise 3. parti kütüphane olmaksızın React Contextleri kullanarak nasıl i18n yapabiliriz onu görüyor olacağız dilerseniz hemen başlayalım.

Kurulumlar

1-)React projesi oluşturma

npx create-react-app my-app --template typescript

2-)LangContext oluşturma src/lang.ts

import React from 'react'

export const langs={
    tr:{
        ad:"Benim Adım Yasin",
        text:"Merhaba Dünya"
    },
    en:{
        ad:"My Name is Yasin",
        text:"Hello World"
    }
}
const LangContext=React.createContext(langs.tr);
export  default  LangContext;

3-) src/App.ts içerisine context’i tanımlama

import React, {useEffect, useState} from 'react';
import './App.css';
import LangContext,{langs} from "./langContext";
import Test from "./components/Test";
function App() {
    const [lang,setLang]=useState(langs.tr)
    const [selectedLanguage,setSelectedLanguage]=useState("tr")
    useEffect(()=>{
        const selectedLang=localStorage.getItem("selectedLanguage")
        const selectedLangObject=localStorage.getItem("selectedLanguageObject")
        if(selectedLang && selectedLangObject){
            setSelectedLanguage(selectedLang);
            setLang(JSON.parse(selectedLangObject))
        }
    },[])

    const switchLang=()=>{
        setSelectedLanguage(selectedLanguage==="tr"?"en":"tr");
        lang===langs.tr?setLang(langs.en):setLang(langs.tr)
        localStorage.setItem("selectedLanguage",selectedLanguage==="tr"?"en":"tr");
        localStorage.setItem("selectedLanguageObject",JSON.stringify(lang===langs.tr?langs.en:langs.tr))
    }
  return (
      <LangContext.Provider value={lang}>
    <div className="App">
      <header className="App-header">
          {selectedLanguage}
          <div>
              <button onClick={switchLang}>Dili Değiştr</button>
          </div>
        <p>
          React Context Kullanarak i18n İngilizce Türkçe Dil Desteği Verme
        </p>
          <p>
              {lang.ad}
          </p>
          <div>
              <Test />
          </div>

      </header>

    </div>
      </LangContext.Provider>

  );
}

export default App;

4-) src/Components/Test.tsx componentimizi oluşturalım

import React from "react";
import LangContext from "../langContext";
const Test=()=>{
    const language=React.useContext(LangContext);
        return(
            <div>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                <div>
                    {language.text}
                </div>
            </div>
        )
}
export  default  Test

5-) Açıklayalım ;

src/App.tsx componentimiz içerisine öncelikle contextimizi import edip daha sonra seçilen dilin objesini ve seçili olan dili tutmak için lang,selectedLanguage statelerimizi tanımlıyoruz. Daha sonra useEffect içerisinden tarayıcının storage üzerine dili kayıt ettiysek sayfamız yenilendiği zamanda aynı şekilde kalması için kontrol ediyoruz. Tanımlamış olduğumuz butona tıklanınca switchLang adlı fonksiyonu çalıştırıp context üzerindeki verimizi güncelliyoruz yapmamız gereken şey işte bu kadar basit.

Herkese İyi Çalışmalar Dilerim.