React İle Bileşen Bazlı Modal Pencere Nasıl Yapılır?

Ön Hazırlık ve Gereksinimler

Uygulamaya başlamadan önce modern bir React geliştirme ortamına sahip olmanız gerekir. 2026 standartlarına uygun olarak Vite veya Next.js gibi güncel araçları kullanmanızı öneririm. Projenizde React 18 veya üzeri bir sürümün yüklü olduğundan emin olun.

• Node.js (LTS sürümü)
• React (v18+)
• Temel CSS veya Tailwind CSS bilgisi

Projenizi başlatmak için terminalinizde npm create vite@latest modal-projesi -- --template react komutunu çalıştırarak temel kurulumu yapabilirsiniz.

Adım 1: Modal Bileşeninin İskeletini Oluşturma

Modal bileşeni, uygulamanın ana akışından bağımsız bir katman olarak düşünülmelidir. İlk adımda, bileşenin temel yapısını ve dışarıdan alacağı parametreleri (props) tanımlayacağız. Bu yapı, modalın açık olup olmadığını kontrol eden bir "isOpen" durumu ve içeriği taşıyan "children" yapısına sahip olacaktır.

// Modal.jsx
const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return (
    

      

        X
        {children}
      
    
  );
};

export default Modal;

Burada isOpen değeri false ise bileşenin hiçbir şey render etmemesini sağlayarak DOM ağacında gereksiz düğüm oluşumunu engelliyoruz. onClose fonksiyonu ise modalın kapatılması için üst bileşenden gelen tetikleyicidir.

Adım 2: Stil ve Görünümün Ayarlanması

Modalın kullanıcı deneyimini iyileştirmek için CSS ile katmanlama (z-index) ve merkezleme işlemlerini yapmalıyız. modal-overlay sınıfı ekranı tamamen kaplamalı ve arka planı karartmalıdır.

/* Modal.css */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  min-width: 300px;
  position: relative;
}

Bu stil kuralları, modalın her zaman ekranın tam ortasında yer almasını ve kullanıcının arka planla etkileşimini kesmesini sağlar.

Adım 3: State Yönetimi ile Modal Kontrolü

Modalı bir üst bileşende kullanmak için React'in useState hook'unu kullanacağız. Bu, modalın açılıp kapanma durumunu yönetmemize olanak tanır.

import { useState } from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    

      


React Modal Rehberi
       setIsModalOpen(true)}>Modalı Aç
      
       setIsModalOpen(false)}>
        


Merhaba!
        
Bu, React ile oluşturulmuş özelleştirilebilir bir modal penceresidir.
      
    
  );
}

Burada isModalOpen durumu, buton tıklamalarıyla güncellenerek modalın görünürlüğünü kontrol eder. Bu yöntem, uygulamanızın farklı kısımlarında farklı içeriklerle modal kullanmanıza olanak tanır.

Adım 4: Portallar (Portals) Kullanarak DOM Hiyerarşisini İyileştirme

React'te modal pencereleri, HTML yapısında ana root div'inin dışında tutmak en iyi pratiklerden biridir. ReactDOM.createPortal kullanarak modalı doğrudan body etiketine bağlayabiliriz. Bu, CSS z-index sorunlarını kökten çözer.

import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    

      

        Kapat
        {children}
      
    
,
    document.body
  );
};

Portal kullanımı, modalın CSS kurallarının (özellikle position: fixed) üst bileşenlerin CSS özelliklerinden etkilenmesini önler.

Adım 5: Modal Yöntemlerinin Karşılaştırılması

Adım 6: Güvenlik ve Erişilebilirlik (A11y)

Modal pencerelerde güvenlik ve erişilebilirlik göz ardı edilmemelidir. Kullanıcı ESC tuşuna bastığında modalın kapanması ve odak yönetimi (focus management) önemlidir.

Güvenlik Uyarısı: Modal içeriğinde kullanıcıdan alınan verileri render ederken her zaman XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olun. React, varsayılan olarak verileri otomatik kaçırır (escape), ancak dangerouslySetInnerHTML kullanımından kaçının.

import { useEffect } from 'react';

// Modal bileşeni içinde ESC tuşu kontrolü
useEffect(() => {
  const handleEsc = (event) => {
    if (event.key === 'Escape') onClose();
  };
  window.addEventListener('keydown', handleEsc);
  return () => window.removeEventListener('keydown', handleEsc);
}, [onClose]);

Sıkça Sorulan Sorular

Modal neden açılmıyor?

Genellikle isOpen state'inin güncellenmemesinden veya CSS z-index değerinin düşük kalmasından kaynaklanır. Tarayıcı konsolunu kontrol ederek hata mesajlarını inceleyin.

Birden fazla modal aynı anda açılabilir mi?

Evet, ancak her modal için ayrı bir state yönetimi yapmanız veya bir Modal Provider (Context API) kullanmanız önerilir.

Modalın dışına tıklayınca kapanmasını nasıl sağlarım?

Overlay (arka plan) div'ine bir onClick event'i ekleyerek onClose fonksiyonunu tetikleyebilirsiniz.

Performans kaybı yaşar mıyım?

Koşullu render yöntemiyle sadece ihtiyaç duyulduğunda DOM'a eklendiği için performans kaybı yaşanmaz.

Mobil cihazlarda modal nasıl görünür?

CSS medya sorguları (media queries) ile modal-content genişliğini mobil cihazlarda %90 veya %100 yaparak responsive hale getirebilirsiniz.

İleri Seviye İpuçları: Modal İçin Animasyon ve Geçiş Efektleri

Modal pencerelerin kullanıcı deneyimini iyileştiren en önemli unsurlardan biri, açılış ve kapanış sırasındaki yumuşak geçiş efektleridir. React ekosisteminde bu işlem için framer-motion kütüphanesi endüstri standardı kabul edilir. Ancak, kütüphane kullanmadan sadece CSS ve React state yönetimi ile de profesyonel sonuçlar alabilirsiniz.

Aşağıdaki örnekte, modalın DOM'dan tamamen kaldırılmadan önce bir "fade-out" animasyonu tamamlamasını sağlayan bir yaklaşım göreceksiniz:

// Modal.css
.modal-overlay {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.modal-overlay.is-visible {
  opacity: 1;
}

// Modal.js
const Modal = ({ isOpen, onClose, children }) => {
  const [isRendered, setIsRendered] = useState(false);

  useEffect(() => {
    if (isOpen) setIsRendered(true);
  }, [isOpen]);

  const handleAnimationEnd = () => {
    if (!isOpen) setIsRendered(false);
  };

  if (!isRendered) return null;

  return (
    

      
{children}
    
  );
};

Modal Yapılarında Test Süreçleri

Modern bir React uygulamasında modal bileşenlerinin "açılıyor mu?", "dışarı tıklayınca kapanıyor mu?" veya "ESC tuşu çalışıyor mu?" gibi senaryolarla test edilmesi kritik öneme sahiptir. React Testing Library ve Jest kullanarak modalınızın kararlılığını şu şekilde doğrulayabilirsiniz:

import { render, screen, fireEvent } from '@testing-library/react';
import Modal from './Modal';

test('Modal dışına tıklandığında onClose fonksiyonu tetiklenmeli', () => {
  const handleClose = jest.fn();
  render(İçerik);
  
  const overlay = screen.getByTestId('modal-overlay');
  fireEvent.click(overlay);
  
  expect(handleClose).toHaveBeenCalledTimes(1);
});

Test Stratejileri Tablosu

Bu testleri CI/CD süreçlerinize dahil ederek, modal bileşeninizde yapacağınız ilerideki CSS veya mantıksal değişikliklerin mevcut işlevselliği bozmadığından emin olabilirsiniz. Özellikle Focus Trap (odak tuzağı) testleri, klavye ile gezinen kullanıcılar için modalın erişilebilirliğini garanti altına alır.

Sonuç

React ile bileşen bazlı modal pencere yapmak, React'in state yönetimi ve bileşen yapısını anlamak için harika bir pratik örneğidir. Portallar kullanarak CSS izolasyonunu sağlamak ve erişilebilirlik özelliklerini eklemek, profesyonel bir arayüz geliştirmenin anahtarıdır. Bir sonraki adımda, bu modal yapısını bir "Context API" veya "Redux" kullanarak merkezi bir sistem üzerinden yönetmeyi deneyebilirsiniz.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında kullanırken form validasyonları, hata yönetimi ve kapsamlı test süreçlerini (Jest/Cypress) dahil etmeyi unutmayın.