React’te MobX ile Tema Değiştirme: Kolay ve Etkili Bir Yöntem

React’te MobX ile Tema Değiştirme: Kolay ve Etkili Bir Yöntem

Merhaba! Bugün, React uygulamalarınızda kullanıcı deneyimini geliştirmek için oldukça önemli bir özellik olan tema değiştirme işlemini, güçlü state yönetim kütüphanesi MobX ile nasıl entegre edeceğinizi adım adım açıklayacağım. Bu yöntem, kodunuzu temiz ve düzenli tutarken, aynı zamanda performans açısından da oldukça avantajlıdır.

Öncelikle, projenizde MobX’i kurmanız gerekmektedir. Bunun için npm veya yarn kullanabilirsiniz:

npm install mobx mobx-react-lite

Kurulumdan sonra, uygulamanızda tema durumunu yönetecek bir store oluşturabiliriz. Bu store, seçili temanın (örneğin, açık veya koyu) bilgisini saklayacak ve bu bilgiyi uygulama genelinde paylaşacaktır.

import { makeAutoObservable } from 'mobx';

class ThemeStore {
  theme = 'light'; // Başlangıçta açık tema

  constructor() {
    makeAutoObservable(this);
  }

  toggleTheme() {
    this.theme = this.theme === 'light' ? 'dark' : 'light';
  }
}

export default new ThemeStore();

Gördüğünüz gibi, ThemeStore sınıfı, theme özelliği ile seçili temayı tutar. toggleTheme fonksiyonu ise temanın açık ve koyu arasında geçiş yapmasını sağlar. makeAutoObservable fonksiyonu ise MobX’in bu sınıfı gözlem altına almasını sağlar.

Şimdi ise, bu store’u React bileşenlerimizde kullanarak tema geçişini sağlayabiliriz. Örneğin, bir buton ile tema değiştirmeyi sağlayacak bir bileşen oluşturabiliriz:

import React from 'react';
import { observer } from 'mobx-react-lite';
import ThemeStore from './ThemeStore'; // Oluşturduğumuz store

const ThemeToggleButton = observer(() => {
  return (
    <button onClick={() => ThemeStore.toggleTheme()}>
      Tema Değiştir
    </button>
  );
});

export default ThemeToggleButton;

Bu bileşen, ThemeStore‘daki toggleTheme fonksiyonunu çağırır ve tema durumunu değiştirir. observer fonksiyonu sayesinde, tema değişimi anında bileşen yeniden render edilir.

Son olarak, uygulamanızın CSS’ini tema durumuna göre ayarlayabilirsiniz. Bu, CSS değişkenleri (CSS Variables) kullanarak kolayca yapılabilir. Örneğin, :root seçicisi ile temaya bağlı CSS değişkenleri tanımlayabilir ve bunları bileşenlerinizde kullanabilirsiniz.

Bu örnekte, basit bir tema değiştirme mekanizması oluşturduk. Ancak daha gelişmiş senaryolar için, lokal depolama (localStorage) kullanarak kullanıcı tercihlerini kaydedebilir veya daha karmaşık tema seçenekleri sunabilirsiniz. Daha detaylı bilgi için MobX resmi dökümanlarını inceleyebilirsiniz. Ayrıca, React uygulamalarınızda daha fazla ipucu ve teknik için kendi bloğumu ziyaret edebilirsiniz.

Sonuç

Bu makalede, React uygulamalarınızda MobX kullanarak tema değiştirme işlemini nasıl kolayca entegre edebileceğinizi öğrendiniz. Bu yöntem, kodunuzu temiz tutarken, performans kaybını da önlemenize yardımcı olur. Umarım bu makale size yardımcı olmuştur!

#Etiketler: React, MobX, tema değiştirme, tema, dark mode, light mode, state management, javascript, react tutorial, fatihsoysal