Gereksinimler ve Ön Hazırlık

Geliştirmeye başlamadan önce sisteminizde Node.js'in güncel bir sürümünün (v20 veya üzeri önerilir) kurulu olduğundan emin olmalısınız. Projemizi oluşturmak için Vite kullanacağız; çünkü Vite, güncel React projeleri için en hızlı ve optimize edilmiş derleme aracıdır.

• Node.js (LTS sürümü)
• React 19 veya üzeri
• Temel CSS bilgisi
• Modern bir kod editörü (VS Code önerilir)

Terminalinize aşağıdaki komutu yazarak projenizi başlatabilirsiniz:

npm create vite@latest font-customizer -- --template react
cd font-customizer
npm install

Bu komutlar, projenin temel dosya yapısını oluşturacak ve gerekli bağımlılıkları yükleyecektir. Kurulum tamamlandıktan sonra npm run dev komutuyla geliştirme sunucusunu başlatabilirsiniz.

State Yönetimi ile Yazı Tipi Verilerini Tanımlama

Dinamik bir özelleştirici için öncelikle hangi değerlerin değişeceğini belirlememiz gerekir. React'in useState hook'unu kullanarak yazı tipi boyutu ve aile tercihlerini tutacak bir yapı kuracağız. Bu yapı, uygulamanın geri kalanına bu değerleri aktarmamızı sağlayacaktır.

import { useState } from 'react';

const useFontSettings = () => {
  const [fontSize, setFontSize] = useState(16);
  const [fontFamily, setFontFamily] = useState('Arial');

  return { fontSize, setFontSize, fontFamily, setFontFamily };
};

Yukarıdaki kod, özelleştirme mantığını bir "custom hook" içine alarak kod tekrarını önler. Bu yaklaşım, bileşenlerinizin daha temiz ve yönetilebilir kalmasını sağlar.

CSS Değişkenleri ile Dinamik Stilleme

React state değerlerini CSS'e aktarmanın en performanslı yolu CSS değişkenlerini (CSS Variables) kullanmaktır. React bileşeninde style objesi ile kök (root) elemente veya kapsayıcıya bu değişkenleri atayabiliriz.

const App = () => {
  const { fontSize, fontFamily } = useFontSettings();

  const dynamicStyles = {
    '--app-font-size': `${fontSize}px`,
    '--app-font-family': fontFamily,
  };

  return (
    

      
Metin Başlığı
      
Bu metin dinamik olarak değişecektir.
    
  );
};

CSS dosyanızda ise bu değişkenleri şu şekilde kullanmalısınız:

.container {
  font-size: var(--app-font-size);
  font-family: var(--app-font-family);
  transition: all 0.3s ease;
}

Kullanıcı Arayüzü İçin Kontrol Paneli Oluşturma

Kullanıcının tercih yapabileceği bir kontrol paneli, uygulamanın etkileşimli kısmıdır. Burada standart HTML input elementlerini kullanacağız. Kullanıcı bir değişiklik yaptığında, state güncellenmeli ve bu değişiklik anında tüm uygulamaya yansıtılmalıdır.

const FontControls = ({ fontSize, setFontSize, setFontFamily }) => {
  return (
    

      Yazı Boyutu: {fontSize}px
       setFontSize(Number(e.target.value))} 
      />
       setFontFamily(e.target.value)}>
        Arial
        Georgia
        Monospace
      
    
  );
};

LocalStorage ile Tercihleri Kalıcı Hale Getirme

Kullanıcı sayfayı yenilediğinde ayarların sıfırlanmasını istemeyiz. Bu nedenle useEffect hook'unu kullanarak ayarları tarayıcı belleğine kaydetmeli ve uygulama açılışında geri yüklemeliyiz.

import { useEffect } from 'react';

// useEffect kullanımı
useEffect(() => {
  const savedSize = localStorage.getItem('fontSize');
  if (savedSize) setFontSize(Number(savedSize));
}, []);

useEffect(() => {
  localStorage.setItem('fontSize', fontSize);
}, [fontSize]);

Güvenlik Uyarısı: LocalStorage'a kaydettiğiniz veriler istemci tarafında tutulur ve kullanıcı tarafından değiştirilebilir. Hassas verileri asla LocalStorage'da saklamayın. Ayrıca, kullanıcıdan gelen girdileri her zaman doğrulamak (validation) XSS saldırılarını önlemek için kritiktir.

Yöntem Karşılaştırması

Sıkça Sorulan Sorular

React'te yazı tipi boyutu için neden 'rem' yerine 'px' kullanmalıyız?

Dinamik özelleştiricilerde kullanıcıya net bir değer (örneğin 16px'ten 20px'e geçiş) sunmak daha sezgiseldir. Ancak erişilebilirlik için 'rem' birimini bir baz değer olarak kullanıp, çarpanı dinamik olarak değiştirmek daha profesyonel bir yaklaşımdır.

Bu yapı performans sorununa yol açar mı?

Hayır, CSS değişkenleri tarayıcı tarafından oldukça optimize edilmiştir. State güncellendiğinde sadece ilgili elementin stili yeniden hesaplanır.

Mobil cihazlarda bu özelleştirici nasıl davranmalı?

Mobil cihazlarda dokunmatik kontrol panelleri (slider) daha geniş olmalı ve yazı tipi boyutları mobil ekran genişliğine göre sınırlandırılmalıdır.

Farklı yazı tiplerini nasıl yüklerim?

Google Fonts üzerinden istediğiniz fontları projenize dahil edebilir ve CSS değişkeni olarak tanımlayarak dinamik olarak değiştirebilirsiniz.

Kullanıcı ayarlarını veritabanına kaydetmek istersem ne yapmalıyım?

Kullanıcı giriş yapmışsa, bir API isteği ile bu tercihleri sunucunuza gönderip veritabanında saklamalı ve bir sonraki girişte oradan çekmelisiniz.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce, girdilerin temizlendiğinden (sanitization) ve güvenlik açıklarının tarandığından emin olun. Yazılım güvenliği sorumluluğu geliştiriciye aittir.

İleri Düzey Özelleştirme: Yazı Tipi Ölçekleme ve Erişilebilirlik Optimizasyonu

Kullanıcıların yazı tipi boyutunu değiştirmesine izin vermek, sadece estetik bir tercih değil, aynı zamanda Web İçeriği Erişilebilirlik Yönergeleri (WCAG) açısından kritik bir gerekliliktir. Dinamik yapılarınızı daha profesyonel hale getirmek için "fluid typography" (akışkan tipografi) yöntemlerini React state'i ile birleştirebilirsiniz.

Aşağıdaki örnek, kullanıcı seçimi ile tarayıcı genişliği arasında bir denge kurarak, yazı tipi boyutunun belirli bir aralıkta otomatik ölçeklenmesini sağlar:

const useResponsiveFontSize = (baseSize, scaleFactor) => {
  const [fontSize, setFontSize] = useState(baseSize);

  useEffect(() => {
    const handleResize = () => {
      const width = window.innerWidth;
      // Ekran genişliğine göre ölçekleme mantığı
      const newSize = width < 768 ? baseSize * 0.9 : baseSize * scaleFactor;
      setFontSize(newSize);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [baseSize, scaleFactor]);

  return fontSize;
};

Performans İzleme ve Hata Ayıklama Stratejileri

Dinamik stil değişiklikleri, özellikle karmaşık bileşen ağaçlarında "re-render" (yeniden çizim) maliyetlerini artırabilir. Uygulamanızın performansını korumak için şu stratejileri uygulamanız önerilir:

• React.memo Kullanımı: Yazı tipi ayarlarından etkilenmeyen bileşenlerin gereksiz yere güncellenmesini engellemek için React.memo ile sarmalayın.
• useMemo ve useCallback: Stil hesaplamalarını her render döngüsünde yeniden yapmamak için useMemo kancasını kullanarak hesaplanmış değerleri önbelleğe alın.
• CSS Değişkenleri ile Performans: Stil nesneleri yerine CSS değişkenlerini (CSS Custom Properties) DOM üzerinde güncellemek, React'in sanal DOM (Virtual DOM) yükünü azaltır.

Hata ayıklama sürecinde, React DevTools kullanarak hangi bileşenin yazı tipi değişikliği sonrası "commit" aşamasında ne kadar süre harcadığını inceleyebilirsiniz. Eğer yazı tipi değişimi sırasında ekran titremesi (layout shift) yaşıyorsanız, CSS tarafında transition özelliğini kullanarak geçişleri yumuşatın:

/* Global CSS dosyanızda */
:root {
  --main-font-size: 16px;
}

body {
  font-size: var(--main-font-size);
  transition: font-size 0.2s ease-in-out;
}

İpucu: Kullanıcıların yazı tipi boyutunu çok uç değerlere (örneğin 40px+) çıkarmasını engellemek için min ve max değerlerini mutlaka bir "config" dosyasında tanımlayın. Bu, tasarımın tamamen bozulmasını engeller.

Sonuç

React ile dinamik bir yazı tipi özelleştirici oluşturmak, sadece teknik bir uygulama değil, aynı zamanda kullanıcı odaklı tasarımın bir parçasıdır. State yönetimi, CSS değişkenleri ve LocalStorage entegrasyonu ile kullanıcılarınıza kişiselleştirilmiş bir deneyim sunabilirsiniz. Bir sonraki adım olarak, bu yapıya "Koyu Mod" (Dark Mode) desteği ekleyerek uygulamanızı daha da kapsamlı hale getirebilirsiniz.