React Popup Oluşturma ve Özelleştirme: 4 Adımda

Web uygulamaları için popup oluşturmak React'te yaygın bir ihtiyaçtır ve React'in bileşen tabanlı mimarisi tekrar kullanılabilir popup'lar kurmayı kolaylaştırır. React popup, kullanıcıyı bulunduğu yerden koparmadan bilgi toplar ya da bir mesaj gösterir. Bir modal, uyarı kutusu veya özel bir form popup'ı gerekebilir. Bu rehber tüm süreci anlatıyor: dört adımda nasıl oluşturulacağını, nasıl erişilebilir yapılacağını ve projenizin ihtiyacına göre hangi kütüphanelere bakabileceğinizi.

Aşağıdaki her kod bloğu TypeScript ile yazıldı. Hepsinin türleri kontrol edildi, hepsi derlendi ve React 19.3, TypeScript 6.0 ve Vite 8.3 ile çalıştırıldı (Ekim 2026'da kontrol edildi).

React Popup Nedir?

React popup, React ile kurulan ve sayfayı yeniden yüklemeden mevcut içeriğin üzerinde beliren etkileşimli bir katmandır. Görünürlüğünü React'in useState hook'u ile koşullu render üzerinden yönetir; genellikle bir arka perde, bir tetikleyici (tıklama, fareyle üzerine gelme veya zamanlayıcı) ve bir kapatma yolu içerir.

React'in bileşen modeli popup'ları tekrar kullanılabilir yapar: bir kez yazarsınız, prop'larla farklı içerik vererek birçok görünümde kullanırsınız.

Her React popup'ın nasıl çalıştığını beş temel öğe belirler:

• Tetikleyiciler: Popup'lar belirli kullanıcı eylemleriyle açılır: buton tıklaması, fareyle üzerine gelme, kaydırma derinliği veya sayfada geçen süre. Tetikleyici çalıştığında bir olay işleyicisi ya da bir effect popup'ın state'ini değiştirir.
• State yönetimi: Görünürlüğü React'in useState hook'u yönetir. open değeri, kullanıcı etkileşimine göre popup'ı göstermek veya gizlemek için koşullu render'ı yönlendirir.
• Arka perde: Popup'ın arkasındaki yarı saydam katman, alttaki sayfayla etkileşimi engeller ve dikkati popup içeriğine toplar.
• Özelleştirilebilir öğeler: CSS, animasyon geçişleri ve prop'lar, popup bileşenini farklı bağlamlarda ve temalarda tekrar kullanılabilir yapar.
• Erişilebilirlik: ARIA rolleri, odak tuzağı ve klavye desteği, popup'ı ekran okuyucu kullananlar dahil herkes için kullanılabilir yapar. Bunları atlamak en sık yapılan uygulama hatalarından biridir.

Bu rehberdeki her örneğin arkasında dört adımlık aynı akış var. Önce tetikleyiciye tıklarsınız: onClick, setOpen(true) çağırır. Sonra state değişir: open true olur ve React yeniden çizer. Ardından showModal() dialog'u açar; arka perde görünür, arkadaki sayfa etkisiz kalır. Son olarak kapanınca odak geri döner: Esc, arka perde ya da Close butonu popup'ı kapatır ve odak tetikleyiciye döner.

React popup'larının tam sayfa yüklemelerine göre en önemli avantajı bağlamı korumasıdır.

Bir mesaj göstermek için kullanıcıyı yeni bir sayfaya yönlendirmek ya da sayfayı yenilemek yerine, React modal popup içeriği yerinde gösterir: kayıt formu tıklamayla açılır, bilgiyi alır ve sayfayı yenilemeden kapanır. Kullanıcı yaptığı işin ortasında kalır. Akışın yarıda kesilmesinin terk oranı getirdiği e-ticaret ve SaaS uygulamalarında bu, davranış açısından anlamlı bir fark yaratır.

React portal'larını erken öğrenmekte fayda var: popup içeriğini ana DOM hiyerarşisinin dışında (genellikle document.body'nin sonuna) render ederler. Bu da iç içe bileşen ağaçlarında çıkan z-index çakışmalarını ve CSS miras sorunlarını çözer. Sabit başlıkların, kenar çubuklarının veya karmaşık yerleşimlerin üstünde durması gereken her popup için portal doğru yaklaşımdır. Portal'daki içerik React ağacında kalmaya devam ettiği için context ve olaylar çalışır. Modal içinse native <dialog> bir adım öteye gider: showModal() onu tarayıcının üst katmanına (top layer) koyar, sayfadaki her z-index'in üstünde durduğu için portal'a hiç gerek kalmaz.

React Native ise farklı. Orada DOM yoktur; <dialog>, react-dom'daki createPortal ve CSS ::backdrop bulunmaz. Bunun yerine React Native'in yerleşik Modal bileşenini kullanın: visible, animationType ve transparent prop'larını alır, Android'de donanım geri tuşunun çağırdığı onRequestClose zorunludur. State kalıbı aynen geçerlidir: bir useState değeri visible'ı yönetir.

React popup'larını doğru uygulamanın zorlukları nelerdir?

Popup hatalarının çoğu tahmin edilebilir kategorilere girer. Kod yazmadan önce bunları bilmek ciddi hata ayıklama süresi kazandırır; en sık sorun çıkaranlar şunlar:

• State yönetimi çakışmaları: useState yerel kapsamın dışına hızla taşar. Oturum başına bir kez açılması gereken ya da oturum durumuna bağlı popup'lar, Context veya Redux, Zustand gibi global bir yöneticiyle yukarı taşınmış state ister.
• Erişilebilirlik boşlukları: Odak tuzağı yoksa klavye kullananlar popup'ın arkasında kalan sayfaya Tab ile geçebilir. Eksik ARIA öznitelikleri (role="dialog", aria-modal="true", aria-labelledby) ekran okuyucuların popup'ı anlamasını tamamen bozar; bunlar isteğe bağlı değildir.
• CSS ve z-index çakışmaları: Karmaşık bileşen ağaçlarına gömülen katmanlar istenmeyen stacking context'leri miras alır. React portal'ları document.body seviyesinde, cascade'in dışında render ederek bunu çözer; showModal() ile açılan bir <dialog> ise üst katmanda durduğu için sorunu hiç yaşamaz.
• Performans ve yeniden render'lar: Ağır popup içeriğinin, ebeveyndeki ilgisiz state değişikliklerinde yeniden render edilmesi takılmalara yol açar. React Compiler kullanmıyorsanız React.memo ve kapatma fonksiyonu için useCallback en etkili iki çözümdür.
• Artan karmaşıklık: Tek bir modal olarak başlayan iş, farklı tetikleyicileri ve state bağımlılıkları olan on popup türüne dönüşür. Popup yöneticisi kalıbını baştan planlamak, sonradan eklemekten kolaydır.
• Çıkış niyetinde yanlış alarmlar: Debounce uygulanmamış ham mouseout olayları, gerçek çıkış hareketlerinde değil, her hızlı imleç hareketinde tetiklenir. 100 ms'lik bir debounce bu gürültüyü süzer.

Sık karşılaşılan zorluklar ve çözümleri bir bakışta:

React ile Popup Nasıl Oluşturulur?

Aşağıdaki adımlar, hiçbir popup kütüphanesi kullanmadan tekrar kullanılabilir bir React popup bileşeni kurar: state için React hook'ları, katman için native <dialog> öğesi ve sade CSS. <dialog> Mart 2022'den beri tüm tarayıcılarda destekleniyor (MDN onu Baseline, yaygın olarak kullanılabilir diye işaretliyor), yani bugün neredeyse her ziyaretçide çalışır.

Adım 1: React 19 projesi kurun

npm ile Vite üzerinde React ve TypeScript projesi oluşturmak için terminalde şunu çalıştırın:

npm create vite@latest react-popup -- --template react-ts
cd react-popup
npm install
npm run dev

veya Yarn ile:

yarn create vite react-popup --template react-ts

Popup'ın kendisi ek bir paket istemez: useState, useEffect, useId ve useRef React ile, <dialog> ise tarayıcıyla gelir. React'in TypeScript türleri @types/react ile gelir ve Vite şablonu bunu zaten kurar. React dışında bir yapıyla çalışıyorsanız aynı popup kalıpları diğer framework'lerde de geçerli; eşdeğer uygulamalar için Angular ile popup, Bootstrap popup ve Bootstrap, Tailwind, CSS ve jQuery ile modal popup rehberlerimize bakın.

Adım 2: React'te Basit Bir Popup Oluşturma

Temel kalıp şu: ebeveyndeki bir useState değeri popup'a open prop'u olarak geçer, kapatma fonksiyonu da callback olarak verilir. src/Popup.tsx dosyasını oluşturun:

import { useEffect, useId, useRef, type ReactNode } from 'react';
import './popup.css';

type PopupProps = {
  open: boolean;
  onClose: () => void;
  title: string;
  children: ReactNode;
};

export default function Popup({ open, onClose, title, children }: PopupProps) {
  const dialogRef = useRef<HTMLDialogElement>(null);
  const titleId = useId();

  useEffect(() => {
    const dialog = dialogRef.current;
    if (!open || !dialog) return;

    const trigger = document.activeElement; // the button that opened the popup
    dialog.showModal(); // top layer, backdrop, page behind becomes inert

    return () => {
      dialog.close();
      if (trigger instanceof HTMLElement) trigger.focus(); // focus goes back
    };
  }, [open]);

  return (
    <dialog
      ref={dialogRef}
      className="popup"
      aria-labelledby={titleId}
      onClose={onClose} // fires on Escape too
      onClick={(event) => {
        if (event.target === event.currentTarget) onClose(); // click on the backdrop
      }}
    >
      <div className="popup__body">
        <h2 id={titleId}>{title}</h2>
        {children}
        <button type="button" onClick={onClose}>
          Close
        </button>
      </div>
    </dialog>
  );
}

Sonra src/App.tsx içinde kullanın:

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

export default function App() {
  const [open, setOpen] = useState(false);

  return (
    <main>
      <button type="button" onClick={() => setOpen(true)}>
        Open popup
      </button>
      <Popup open={open} onClose={() => setOpen(false)} title="Hello from a React popup">
        <p>Popup content here!</p>
      </Popup>
    </main>
  );
}

Nasıl çalışıyor: open true olduğunda effect showModal() çağırır. Bu çağrı dialog'u üst katmana koyar, arka perdeyi çizer ve sayfanın geri kalanını etkisiz bırakır. open false olduğunda ya da bileşen kaldırıldığında cleanup dialog'u kapatır ve odağı popup'ı açan butona geri taşır. Escape tuşu dialog'u tarayıcı düzeyinde kapatır ve close olayını tetikler; bu olay da sizin onClose fonksiyonunuzu çağırır. Arka perdeye yapılan tıklama doğrudan <dialog> öğesine düşer (iç boşluğu içteki div taşır), bu yüzden o kontrol popup'ı kapatır. useId her popup'a aria-labelledby için benzersiz bir id verir ve ekran okuyucular başlığı okur.

Çalıştığını şöyle anlarsınız: sayfa kararır, popup "Hello from a React popup" ve "Popup content here!" metinleriyle açılır, odak Close butonundadır. Escape, arka perdeye tıklama ve Close butonu popup'ı kapatır, odak "Open popup" butonuna döner.

Adım 3: Popup'ı Özelleştirme

Özelleştirme CSS ile yapılır. src/popup.css dosyasını oluşturun (bileşen onu zaten içe aktarıyor) ve sitenizin tasarım sistemine uyan stilleri verin:

.popup {
  width: min(90vw, 300px);
  padding: 0; /* the inner div carries the padding, so a click on it never counts as a backdrop click */
  border: none;
  border-radius: 8px;
  background: #f1f1f1;
  color: #191a1a;
}

.popup__body {
  padding: 20px;
  text-align: center;
}

.popup::backdrop {
  background: rgb(0 0 0 / 0.5);
}

.popup[open] {
  animation: popup-in 200ms ease-out;
}

@keyframes popup-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .popup[open] {
    animation: none;
  }
}

Bu stillerle popup'ın genişliği 300px olur (küçük telefonlarda daha dar), metnin çevresinde 20px boşluk kalır, arka plan açık gri (#f1f1f1) olur ve metin ortalanır. ::backdrop sözde öğesi modal dialog'un arkasındaki karartmayı biçimlendirir, ayrı bir katman div'ine gerek kalmaz.

Animasyonları 300ms'nin altında tutun; etkileşimli öğelerde daha uzun geçişler, özellikle mobilde, ağır hissettirir. prefers-reduced-motion bloğu, sisteminden daha az hareket isteyen ziyaretçiler için animasyonu kapatır. React Transition Group kullanacaksanız (son sürüm 4.4.5, 2023), ona bir nodeRef verin: React 19 findDOMNode'u kaldırdı ve kütüphane nodeRef olmadan ona başvuruyor.

Adım 4: React'te Farklı Türlerde Popup'lar Oluşturma

Temel kurulum çalıştıktan sonra aynı bileşen özel popup türlerine genişler. Kullanıcı girdisini anında alan bir prompt popup şöyle:

import { useState, type FormEvent } from 'react';
import Popup from './Popup';

export default function PromptPopup() {
  const [open, setOpen] = useState(false);
  const [name, setName] = useState('');

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setOpen(false);
  }

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>
        Enter name
      </button>
      <Popup open={open} onClose={() => setOpen(false)} title="Enter your name">
        <form onSubmit={handleSubmit}>
          <label>
            Name
            <input
              type="text"
              value={name}
              onChange={(event) => setName(event.target.value)}
              placeholder="Your name"
            />
          </label>
          <p>Hello, {name || 'User'}!</p>
          <button type="submit">Save</button>
        </form>
      </Popup>
    </>
  );
}

Selamlama, kullanıcı yazdıkça güncellenir. React {name} değerini render ederken kaçışlar; kullanıcı HTML yazsa bile düz metin olarak görünür. Kullanıcı girdisini asla dangerouslySetInnerHTML'e vermeyin.

İmleç pencerenin üst kenarından, sekmelere ve adres çubuğuna doğru çıktığında açılan bir çıkış niyeti popup'ı da şöyle:

import { useEffect, useState } from 'react';
import Popup from './Popup';

const SEEN_KEY = 'exit-popup-seen';

export default function ExitIntentPopup() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    let timer: number | undefined;

    function handleMouseOut(event: MouseEvent) {
      if (sessionStorage.getItem(SEEN_KEY)) return; // once per session
      // The cursor left the page through the top edge (towards the tabs and address bar).
      if (event.relatedTarget === null && event.clientY <= 0) {
        timer = window.setTimeout(() => {
          sessionStorage.setItem(SEEN_KEY, '1');
          setOpen(true);
        }, 100); // 100 ms debounce: a quick pass over the edge doesn't count
      }
    }

    function handleMouseOver() {
      window.clearTimeout(timer); // the cursor came back in time
    }

    document.addEventListener('mouseout', handleMouseOut);
    document.addEventListener('mouseover', handleMouseOver);
    return () => {
      window.clearTimeout(timer);
      document.removeEventListener('mouseout', handleMouseOut);
      document.removeEventListener('mouseover', handleMouseOver);
    };
  }, []);

  return (
    <Popup open={open} onClose={() => setOpen(false)} title="Before you go">
      <p>Get our weekly tips in your inbox.</p>
    </Popup>
  );
}

Çıkış niyeti yalnızca fareyle çalışır, telefon ve tabletlerde hiç tetiklenmez. 100 ms'lik gecikme, kenarı geçip hemen geri dönen imleci yok sayar; sessionStorage ise popup'ı oturum başına bir kez gösterir.

Peki yapmaya değer mi? Popupsmart'ın 2026 popup kıyaslamasına göre çıkış niyeti istatistiksel olarak güvenilir bir üstünlük göstermiyor: en hassas çıkış niyeti ayarındaki popup'lar, çıkış niyeti olmayanlara karşı %1,10'a %0,78 dönüştürdü (medyan kampanya); bu fark tesadüf olabilir. Çıkış niyeti popup'ları işe yarıyor mu yazımız veriyi sayfa türüne göre ayrıntılandırıyor.

Bildirim için modal yanlış araçtır: kullanıcının sadece okuması gereken bir mesaj için odağı çalar. Bunun yerine createPortal ile bir bildirim (toast) render edin ve role="status" verin; ekran okuyucular mesajı odağı taşımadan okur:

import { useEffect, useEffectEvent } from 'react';
import { createPortal } from 'react-dom';

type ToastProps = {
  message: string | null;
  onDismiss: () => void;
};

export default function Toast({ message, onDismiss }: ToastProps) {
  const dismiss = useEffectEvent(onDismiss);

  useEffect(() => {
    if (!message) return;
    const timer = window.setTimeout(() => dismiss(), 4000);
    return () => window.clearTimeout(timer);
  }, [message]);

  // Keep the live region in the page even when it's empty,
  // so screen readers announce the message when it appears.
  return createPortal(
    <div role="status" className="toast">
      {message}
    </div>,
    document.body,
  );
}

Göstermek için const [toast, setToast] = useState<string | null>(null); tanımlayın, <Toast message={toast} onDismiss={() => setToast(null)} /> render edin ve başarılı bir kayıttan sonra setToast('Saved') çağırın. React 19.2'den beri kararlı olan useEffectEvent, zamanlayıcının ebeveyn her yeniden render olduğunda baştan başlamadan en güncel onDismiss'i çağırmasını sağlar.

Yaygın popup türleri ve başlıca kullanım alanları:

• Modal bileşen: Onaylar, kayıt formları ya da kritik kararlar için dikkati tamamen toplayan katmanlar. Odak tuzağını her zaman uygulayın; Adım 2'deki gibi showModal() ile açılan <dialog> bunu sizin yerinize yapar.
• Bildirim popup'ı: setTimeout ile kendiliğinden kapanan uyarılar. Form gönderimi veya asenkron işlemlerden sonra başarı/hata geri bildirimi için idealdir.
• Tooltip popup: Fareyle üzerine gelince açılan, tetikleyicisinin yanında duran, sade stilli ve arka perdesiz bağlamsal yardım katmanları. Tooltip'ler alttaki içeriği asla kapatmamalı.
• Çıkış niyeti popup'ı: Elde tutma teklifleri için fareyle sayfadan çıkışı algılar. Kullanıcıyı bıktırmamak için oturum başına bir tetiklemeyle sınırlayın.

Bildirim popup'larında onaylar için role="status" (nazik), yalnızca hemen dikkat isteyen hatalar için role="alert" kullanın; role="alert" ısrarlı okunur, bu yüzden onu aria-live="polite" ile birleştirmek çelişkili sinyal verir.

DOM yerleşimiyle ilgili ayrıntılar için React createPortal belgelerine bakın.

React popup'ları nasıl erişilebilir yapılır?

Erişilebilir React popup'ları birlikte çalışan üç şey ister: doğru ARIA öznitelikleri, odak tuzağıyla klavye gezinme desteği ve açılışta ve kapanışta doğru odak yönetimi. Her biri WCAG 2.2 AA uyumu için gerekli; ayrıca CDC'nin Disability and Health Data System verilerine göre (2024 güncellemesi) ABD'de her 4 yetişkinden 1'inden fazlasının yaşadığı bir tür engelle kullanılabilir bir deneyim için de şart.

showModal() ile açılan bir <dialog> bunların çoğunu sizin yerinize halleder. Tarayıcı ona dialog rolünü verir, dışındaki her şeyi etkisiz bırakır ve Tab tuşu arkadaki sayfaya ulaşamaz, Escape ile kapatır. Sizin eklemeniz gerekenler aria-labelledby (dialog açılınca başlık okunsun diye) ve kapanışta odağı geri vermek; Adım 2'deki bileşen ikisini de yapıyor.

Popup'ınız düz bir div olmak zorundaysa (örneğin kendi katmanını çizen bir tasarım sistemi), popup kapsayıcısına üç ARIA özniteliğiyle başlayın: role="dialog" onu ekran okuyuculara tanıtır, aria-modal="true" sanal imlecin popup'tan çıkmasını engeller, aria-labelledby ise dialog'u başlığına bağlar ve başlık odakla birlikte hemen okunur. Sonra odağı içeride tutun. Odak tuzağı klavye gezinmesini popup'ın içinde tutar. useRef ve useEffect ile, bir portal üzerinden render edilen eksiksiz bir uygulama şöyle:

import { useEffect, useEffectEvent, useRef, type ReactNode } from 'react';
import { createPortal } from 'react-dom';

const FOCUSABLE =
  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';

type AccessiblePopupProps = {
  open: boolean;
  onClose: () => void;
  labelledBy: string; // id of the popup's heading
  children: ReactNode;
};

export default function AccessiblePopup({ open, onClose, labelledBy, children }: AccessiblePopupProps) {
  const popupRef = useRef<HTMLDivElement>(null);
  const close = useEffectEvent(onClose);

  useEffect(() => {
    const popup = popupRef.current;
    if (!open || !popup) return;

    const trigger = document.activeElement;
    const focusable = () => Array.from(popup.querySelectorAll<HTMLElement>(FOCUSABLE));
    focusable()[0]?.focus();

    function handleKeyDown(event: KeyboardEvent) {
      if (event.key === 'Escape') {
        close();
        return;
      }
      if (event.key !== 'Tab') return;

      const items = focusable();
      if (items.length === 0) {
        event.preventDefault();
        return;
      }
      const first = items[0];
      const last = items[items.length - 1];
      if (event.shiftKey && document.activeElement === first) {
        event.preventDefault();
        last.focus();
      } else if (!event.shiftKey && document.activeElement === last) {
        event.preventDefault();
        first.focus();
      }
    }

    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
      if (trigger instanceof HTMLElement) trigger.focus();
    };
  }, [open]);

  if (!open) return null;

  return createPortal(
    <div className="popup-overlay open">
      <div ref={popupRef} role="dialog" aria-modal="true" aria-labelledby={labelledBy}>
        {children}
      </div>
    </div>,
    document.body,
  );
}

Popup kapanınca odak, onu açan öğeye dönmeli. Bu rehberdeki iki bileşen de bunu iki satırla yapıyor: açmadan önce document.activeElement değerini okuyor, effect'in cleanup'ında ona focus() çağırıyor. Bu olmazsa ekran okuyucu ve klavye kullanıcıları popup'ı kapattıktan sonra sayfanın en başında kalır.

Herhangi bir React popup'ı yayına almadan önce erişilebilirlik kontrol listesi:

• Tüm etkileşimli öğelere klavyede Tab ile ulaşılabiliyor
• Escape tuşu popup'ı kapatıyor (beklenen standart davranış)
• Renk kontrastı gövde metninde 4.5:1, büyük metinde 3:1 oranını karşılıyor
• Animasyonlar prefers-reduced-motion medya sorgusuna uyuyor
• VoiceOver (macOS) veya NVDA (Windows) ile ekran okuyucu testi yapıldı
• Kapanışta odak tetikleyici öğeye dönüyor

Uygulamanızı Chrome Lighthouse ile denetleyin. Erişilebilirlik puanı eksik ARIA özniteliklerini, kontrast hatalarını ve bazı odak sorunlarını otomatik yakalar; klavye akışını ayrıca elle test edin.

reactjs-popup'a en iyi alternatifler nelerdir?

Her projenin ihtiyacı farklı. Bu rehberdeki native dialog çoğu popup için yeterli, reactjs-popup ise eski kod tabanlarında hâlâ duruyor. Ama daha büyük uygulamalar ya da katı erişilebilirlik veya tasarım sistemi gereksinimleri olan ekipler çoğu zaman bir kütüphaneye ihtiyaç duyar. Kontrol ettiğimizde (Ekim 2026) npm'deki son sürümlerle ana seçenekler şöyle karşılaştırılıyor:

reactjs-popup

reactjs-popup React 19'a peer dependency uyarısı vermeden kurulur. React 19.3 testimizde modal sürümü odağı içerideki ilk butona taşıdı, Tab'i popup'ın içinde tuttu, Escape ile kapandı ve odağı tetikleyiciye geri verdi. role="dialog" ekliyor ama aria-modal ve erişilebilir bir ad eklemiyor; içeriğe aria-label veya aria-labelledby'yi kendiniz ekleyin. Son sürümü 2.0.6, Eylül 2023'te çıktı. Projeniz onu zaten kullanıyorsa kontrollü sürüm şöyle görünür:

import { useState } from 'react';
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';

export default function LibraryPopup() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>
        Open popup
      </button>
      <Popup
        open={open}
        onClose={() => setOpen(false)}
        modal
        closeOnDocumentClick
        contentStyle={{ width: '300px', padding: '20px', borderRadius: '8px' }}
      >
        <div>
          <p>Popup content here!</p>
          <button type="button" onClick={() => setOpen(false)}>
            Close
          </button>
        </div>
      </Popup>
    </>
  );
}

contentStyle prop'u satır içi stilleri alır, modal prop'u arka katmanı ekler. position prop'u ("top center", "bottom left", "right center") yalnızca bir trigger öğesi verip modal'ı kullanmadığınızda, yani tooltip tarzı popup'larda işe yarar.

Material UI (MUI)

Projeniz zaten MUI ekosistemini kullanıyorsa Material UI ideal. Dialog bileşenleri odak yönetimi, klavye gezinmesi ve arka perde davranışı gibi erişilebilirlik konularını otomatik halleder; kurumsal uygulamalar ve tutarlı tasarım sistemleri için güçlü bir seçimdir.

Headless UI

Headless UI, stil dayatmadan tamamen erişilebilir dialog yapı taşları sunar. Odak tuzağı ve ARIA öznitelikleri gibi yerleşik erişilebilirlik özelliklerinden vazgeçmeden görünümü tamamen kontrol etmek isteyen Tailwind kullanıcıları arasında özellikle popüler.

Özel hook'lar + portal'lar

Hook'lar ve portal'larla kendi popup çözümünüzü kurmak en fazla esnekliği ve sıfır bağımlılığı verir. Performans, paket boyutu ya da çok özel UX etkileşimleri öncelikliyse en iyi yaklaşım budur, ama erişilebilirliği elle uygulamanız gerekir. Adım 2'deki <dialog> bileşeni bu yaklaşımın, erişilebilirlik işinin çoğunu tarayıcıya bırakan hâli.

Mobiscroll

Mobiscroll, tarih seçiciler, seçim kutuları ve form katmanları dahil mobil için optimize edilmiş popup deneyimlerine odaklanır. Ticari bir kütüphanedir; iOS ve Android'de dokunmaya uygun etkileşimler ve native benzeri animasyonlar şartsa güçlü bir seçenektir. Kurulum ayrıntıları için Mobiscroll'un React belgelerine bakın.

Semantic UI React

Semantic UI React, kendi tasarım sistemiyle uyumlu, önceden stillendirilmiş modal ve popup bileşenleri içerir. Son sürümü 2.1.5, Aralık 2023'te çıktı ve peer aralığı React 18'de bitiyor: React 19 projesinde npm install semantic-ui-react ERESOLVE hatasıyla duruyor. Yalnızca proje zaten React 18 üzerinde Semantic UI kullanıyorsa makul bir seçenek; özelleştirme esnekliği ve bakım aktivitesi yeni kütüphanelere göre daha sınırlı.

Radix UI Dialog

Radix UI Dialog, bileşen kütüphaneleri ve tasarım sistemleri kurmak için tasarlanmış, erişilebilir ve stilsiz yapı taşları sunar. WAI-ARIA dialog kalıbını izler, davranışı kontrol etmenizi sağlar ve stili tamamen geliştiriciye bırakır.

Nasıl seçmeli?

• Hafif ve sade bir çözüm: Adım 2'deki native <dialog> bileşeni
• Stil kontrolüyle birlikte tam erişilebilirlik: Headless UI veya Radix UI
• Zaten bir bileşen framework'ü kullanıyorsanız: Material UI
• Sıfır bağımlılık ve özel davranış: Özel hook'lar + portal'lar
• Mobil öncelikli formlar ve seçiciler: Mobiscroll
• Eski bir kod tabanının bakımı: Geçiş yapana kadar reactjs-popup veya Semantic UI React ile devam edin

React popup performansı nasıl optimize edilir?

React popup'larındaki performans sorunları genellikle üç kaynaktan gelir: gereksiz yeniden render'lar, animasyon sırasında ana iş parçacığının tıkanması ve ağır içeriğin senkron yüklenmesi. Her birinin hedefli bir çözümü var.

React.memo ile memoization, ebeveyndeki ilgisiz state değişikliklerinde popup bileşeninin yeniden render edilmesini önler. Popup bileşenini sarın ve kapatma fonksiyonunun referansını sabit tutmak için useCallback kullanın. Projeniz React Compiler kullanıyorsa (Ekim 2025'ten beri 1.0) bu memoization'ı sizin yerinize ekler, ikisini de yazmanız gerekmez. Aşağıdaki örnek popup içeriğini tembel (lazy) olarak da yüklüyor:

import { lazy, memo, Suspense, useCallback, useState } from 'react';

const PopupContent = lazy(() => import('./PopupContent'));

type LazyPopupProps = { open: boolean; onClose: () => void };

const LazyPopup = memo(function LazyPopup({ open, onClose }: LazyPopupProps) {
  if (!open) return null;
  return (
    <Suspense fallback={<p>Loading…</p>}>
      <PopupContent onClose={onClose} />
    </Suspense>
  );
});

export default function Parent() {
  const [open, setOpen] = useState(false);
  const handleClose = useCallback(() => setOpen(false), []);

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>
        Show offer
      </button>
      <LazyPopup open={open} onClose={handleClose} />
    </>
  );
}

Popup'ın kendisi de src/PopupContent.tsx içinde:

import Popup from './Popup';

export default function PopupContent({ onClose }: { onClose: () => void }) {
  return (
    <Popup open onClose={onClose} title="Today's offer">
      <p>Popup content here!</p>
    </Popup>
  );
}

Vite, PopupContent'i ayrı ve küçük bir dosyaya böler; tarayıcı onu yalnızca biri "Show offer" butonuna ilk kez tıkladığında indirir.

JavaScript animasyonları yerine CSS geçişleri animasyon işini GPU'ya devreder ve ana iş parçacığını kullanıcı etkileşimlerine açık bırakır. opacity ve transform kullanın: tarayıcı bu özellikleri yerleşimi yeniden hesaplamadan birleştirir. Yukarıdaki erişilebilir popup gibi div tabanlı bir popup için:

.popup-overlay {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 200ms ease, transform 200ms ease;
}

.popup-overlay.open {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .popup-overlay {
    transition: none;
  }
}

Yayına almadan önce performans kontrol listesi:

• React DevTools Profiler ile ölçün; popup açılıp kapanırken beklenmedik yeniden render'lara bakın
• Chrome DevTools Performance panelinde animasyonun layout veya paint işi yaratmadığını doğrulayın
• Popup sayfaya eklendiğinde Lighthouse Performance puanının düşmediğini kontrol edin
• Orta seviye bir Android cihazda test edin; masaüstü testlerinin kaçırdığı performans sorunlarını gösterir
• Çıkış niyeti veya kaydırmayla tetiklenen popup'larda kullanılan olay dinleyicilerini (scroll, mousemove) kısıtlayın (throttle)

Dinamik import'larla kod bölme, uygulamada birden fazla popup türü varken paketleri hafif tutar. React.lazy() kullanın ki her popup türü ilk sayfa yüklemesinde değil, yalnızca tetiklendiğinde yüklensin.

Karmaşık popup state'lerinde, özellikle birden fazla iç adımı veya form durumu olan popup'larda, useReducer birden fazla useState çağrısından daha uygundur.

Tek bir reducer, popup'ın tüm state geçişlerini tek yerde tutar; böylece bir adım değişikliği ilişkili değerleri senkron dışı bırakamaz. Her adımın birkaç state değerini birden değiştirdiği çok adımlı modallarda (kayıt akışları, onboarding sihirbazları) bunun farkı hemen görülür.

Paketleyici tarafında, kullanılmayan popup kütüphanesi kodunu tree-shaking ile atmak gönderilen JavaScript'i azaltır. Paketleyici yapılandırmanızın, mümkün olan yerlerde paketleri yan etkisiz (side-effect-free) olarak işaretlediğinden emin olun. Webpack için webpack tree-shaking rehberine bakın; Vite'ın production build'i ES modüllerini varsayılan olarak tree-shake eder.

Websiteniz İçin Popup Oluşturucu Popupsmart'ı Kullanın

Ekibiniz pazarlama popup'larını (bülten kaydı, teklif, geri bildirim formu) geliştirici beklemeden oluşturup değiştirmek istiyorsa kodsuz bir popup oluşturucu daha hızlı yoldur. Popupsmart hedeflemeyi, tasarımı ve entegrasyonları görsel bir editörle yönetir; npm kurulumu ya da state yönetimi gerekmez. Silme onayı gibi uygulamanızın kendi mantığına ait popup'larda yukarıdaki bileşenlerin yerini tutmaz.

Adım 1: Yeni kampanya oluşturun

Popupsmart'a kaydolun; ücretsiz plan $0 ve ayda 5K sayfa gösterimini kapsıyor. Panelde + Yeni Kampanya butonuna tıklayın, kampanyaya bir ad verin, alan adınızı seçin ve Kaydet'e tıklayın.

Sizden bir iş hedefi seçmeniz istenir: e-posta listesi büyütmek, bir teklifi duyurmak, geri bildirim toplamak, bir ürünü tanıtmak veya telefon araması almak. Doğru hedefi seçmek sonraki adımda gösterilen şablonları belirler; böylece daha tasarım ayarlarına dokunmadan popup'ınız bir dönüşüm hedefine göre şekillenmiş olur.

İkinci adım olarak, iş amacınıza uygun bir şablon seçmeniz gerekir. Farklı iş amaçlarına uygun birçok hazır popup şablonumuz var. Onları keşfederek işinizin farklı amaçları için bir şablon seçebilirsiniz.

Popupsmart ile oluşturulan popup'lar sayesinde:

• E-posta listenizi büyütebilir ve ziyaretçilerinizi hedefleyebilirsiniz.
• Ürün ve hizmetlerinizi duyurabilir ve müşterilerinize gösterebilirsiniz.
• Çerez yasalarına uyum sağlayarak ziyaretçilerinizin çerez depolama iznini alabilirsiniz.
• Telefon çağrılarınızı artırabilir ve ziyaretçilerinizle geleneksel bir şekilde güçlü ilişkiler kurabilirsiniz.
• Özel teklifler sunarak ürün ve hizmetlerinizi tanıtabilirsiniz.
• Ziyaretçilerin paylaşmayı seçtiği bilgileri form gönderimleriyle toplayabilir ve deneyimlerini iyileştirebilirsiniz.

Bu popup oluşturma kılavuzunda, geri bildirim toplamak için tasarlanmış bir şablon kullanacağız.

Adım 2: Popup tasarımınızı özelleştirin

Şablonunuzu seçtikten sonra popup oluşturucu ekranı açılır. "Özelleştir" adımında öğe ekleyip düzenlersiniz; "Stil" adımında ise popup'ınızın konumunu, boyutunu, renk paletini ve yazı tiplerini sitenize daha uygun hale getirebilirsiniz.

Popup'ınızın resmini, metnini ve giriş alanlarını işinize göre düzenleyebilirsiniz.

Bu aşamada doğru yapılması gereken birkaç özelleştirme kararı:

• CTA buton metni: Belirli eylem ifadeleri ("Ücretsiz rehberi al") ziyaretçiye ne alacağını söyler; "Gönder" veya "Buraya tıkla" gibi genel ifadeler söylemez.
• Kapatma butonunun görünürlüğü: Açıkça görünen bir kapatma seçeneği hayal kırıklığını azaltır; etkileşimi zorlamak için gizlemeyin.
• Mobil önizleme: İlerlemeden önce editörde mobil görünüme geçin. Popupsmart'ın 2026 kıyaslamasında popup gösterimlerinin %63'ü mobilde gerçekleşiyor. Masaüstü genişliğinde iyi görünen bir tasarım küçük ekranlarda önemli içeriğin üstüne binebilir, bu da SEO açısından rahatsız edici geçiş sayfası riski taşır; mobil popup tasarımı rehberimiz yerleşim kurallarını anlatıyor.

Eklediğiniz her öğeye ayrı stil verebilirsiniz. Popup'ın bloklarından birindeki bir öğeye tıklayın ve stilini orada değiştirin.

Adım 3: Hedefleme ve tetikleyici kurallarını ayarlayın

Popup'ınızı özelleştirmeyi bitirince "Segment" bölümüne gidin.

Hedefleme, kodsuz bir popup oluşturucunun en çok kod kazandırdığı yerdir: kural motoru, yukarıdaki çıkış niyeti hook'u gibi özel JavaScript gerektirecek davranış mantığını halleder. Önceden tanımlanmış bir segment seçin ya da "Segmenti Düzenle"ye tıklayıp şunları ayarlayın:

• Kitle filtreleri: Popup'ı yalnızca yeni ziyaretçilere, geri dönen ziyaretçilere, belirli trafik kaynaklarına ya da belirli bir ülkeden veya cihaz türünden gelen ziyaretçilere gösterin.
• Davranış tetikleyicileri: Çıkış niyeti (imleç tarayıcı çubuğuna doğru gider), kaydırma derinliği (ziyaretçi sayfanın %50'sini veya %75'ini kaydırınca açılır), sayfada geçen süre (X saniye sonra açılır) ya da belirli bir öğeye tıklama arasından seçin. Görünmeden önce bekleyen popup'lar, sayfa yüklenir yüklenmez gösterilenlere karşı %0,83'e %0,61 dönüştürüyor (medyan kampanya); yön verinin her yılında aynı kalıyor ama fark istatistiksel olarak güvenilir değil, bu yüzden bir kural değil, eğilim olarak okuyun. Popup zamanlaması rehberimiz gecikme seçeneklerini anlatıyor.
• Sıklık sınırları: Aynı ziyaretçinin popup'ı ne sıklıkla göreceğini belirleyin: oturum başına bir kez, günde bir kez ya da toplamda belirli bir sayıda. Popupsmart'ın 2026 kıyaslamasında bir ziyaretçinin bir hafta içinde popup'ı gördüğü ilk iki sefer benzer oranlarda dönüşüyor (gösterimlerin %1,33'ü ve %1,22'si, toplu); üçüncü gösterimden itibaren dönüşüm düşüyor, altıncı gösterimden itibaren %0,41'e, yani ilk gösterim oranının %31'ine iniyor.
• Sayfa düzeyinde hedefleme: URL Hedefleme ile popup'ı belirli URL'lerle veya URL kalıplarıyla sınırlayın; yalnızca ziyaretçinin bağlamına uygun yerde görünsün.

İş hedefinize göre seçebileceğiniz farklı hedefleme seçenekleri var.

"Hedef Kitle", "Kullanıcı Davranışı" ve "Sıklık Ayarları" bölümlerinde tetikleyicileri ayarlayarak popup'ı tam olarak kimin ve ne zaman göreceğine siz karar verirsiniz.

Bu bölümle işiniz bitince Kaydet butonuna tıklayın ve "Ayarlar" kısmına geçin.

Adım 4: Entegrasyonları bağlayın ve yayınlayın

Yayınlamadan önce ihtiyacınız olan araçları Ayarlar panelinden bağlayın: e-posta pazarlama araçları (Mailchimp, Klaviyo, HubSpot, Brevo), CRM'ler, Google Analytics ve özel iş akışları için Zapier ya da webhook. Lead toplayan popup'larda e-posta platformunuzu doğrudan bağlarsanız yeni aboneler elle dışa aktarmaya gerek kalmadan listenize düşer.

Her şey hazır olduğunda "Yayınla" adımına geçin!

Popup'ınızı oluşturduktan sonra, popup'ınızın embed kodunu sitenizin kod ekleme bölümüne ekleyin. Kolayca kapanış body etiketinden önce ekleyebilirsiniz. Paneldeki sol çubukta Embed Kodu'na tıklayın ve kodu kopyalayın. Bir React uygulamasında kodu, uygulamanın sunulduğu HTML sayfasına (Vite projesinde index.html) kapanış </body> etiketinden hemen önce, React'in render ettiği öğenin dışına yapıştırın; böylece bir kez yüklenir ve yeniden render'lardan etkilenmez. Kodu her siteye yalnızca bir kez ekleyin. Ayrıca web sitenize Google Etiket Yöneticisi ile popup ekleyebilirsiniz.

Son olarak alan adınızı Web sitesi bölümünden ekleyip doğrulayın; Popupsmart yardım merkezindeki embed kodu rehberi adımları gösteriyor. Popup'lar yalnızca doğrulanmış web sitelerinde görünür.

Bir Popupsmart kampanyasını React uygulamanızdaki bir butondan açmak için kampanyanın Segment bölümünde Kullanıcı Davranışı altındaki Tıklamaya Duyarlı Hedefleme'yi etkinleştirin, oluşturulan koddaki kampanya id'sini kopyalayın ve bir tıklama işleyicisinden window.ps.show() çağırın:

declare global {
  interface Window {
    ps?: { show(options: { id: number }): void };
  }
}

// Copy the campaign id from the snippet Popupsmart generates under On-Click Targeting.
const CAMPAIGN_ID = 12345;

export default function PopupsmartButton() {
  return (
    <button type="button" onClick={() => window.ps?.show({ id: CAMPAIGN_ID })}>
      Get the newsletter
    </button>
  );
}

Optional chaining sayesinde embed kodu henüz yüklenmemişken butona tıklamak hata vermez. Popupsmart yardım merkezi, show()'u başka bir sayfaya yönlendiren link veya butonlarda kullanmamanızı öneriyor.

Aynı adımlar bir teklif, bir duyuru ya da bir geri bildirim anketi için de geçerli; değişen yalnızca şablon ve metin.

Popupsmart; Mailchimp, HubSpot, Shopify, Brevo (eski adıyla Sendinblue) ve Squarespace gibi birçok pazarlama aracı ve web sitesiyle entegre olur.

Kod size tam kontrol verir. Kodsuz bir oluşturucu ise daha hızlı değişir ve hedefleme hazır gelir; bu da yanında geliştirici olmayan bir pazarlama ekibine uyar.

Sonuç

React popup'ları sade bir çekirdeğe dayanır: görünürlük için useState, DOM yerleşimi için <dialog> veya portal'lar ve tetikleyiciler için olay işleyicileri. Ama doğru yapmak erişilebilirliğe, performansa ve mobil davranışa dikkat ister. Bu rehberdeki dört adım işin temelini kapsıyor: React 19'u kurun, dialog bileşenini oluşturun, CSS ile özelleştirin ve belirli popup türlerine genişletin.

Baştan doğru yapılması gereken en önemli şeyler: ARIA öznitelikleri ve odak yönetimiyle erişilebilir bir bileşen yazın, z-index çakışmalarından kaçınmak için üst katmanı veya React portal'larını kullanın ve yayına almadan önce gerçek mobil cihazlarda test edin. Bunlardan birini atlamak, yayından sonra düzeltmesi çok daha zor sorunlar yaratır.

Kodla hiç uğraşmak istemiyorsanız Popupsmart, popup'ları görsel bir editörde oluşturmanızı, hedeflemenizi ve yayınlamanızı sağlar: npm yok, state yönetimi yok ve ücretsiz bir fiyatlandırma planı var. Geliştirici beklemeden hızlı denemek isteyen pazarlama ekipleri için pratik bir seçenek.

React popup'ları hakkında sık sorulan sorular

React'te popup ile modal arasındaki fark nedir?

Popup, hızlı bilgi veya bağlama dayalı uyarılar için kullanılan hafif bir katmandır ve çoğu zaman onu açan öğenin yanında durur. Modal ise sayfayı bir arka perdeyle kaplayan, kullanıcının dikkatini isteyen ve açıkça kapatılması gereken özel bir popup türüdür. Modallarda odak her zaman içeride tutulmalı; basit popup'larda bu gerekmeyebilir. Kritik kararlar ve formlar için modal, ek bilgi için daha hafif popup'lar kullanın. UX Planet'teki modal tasarımı rehberi karar ölçütlerini ayrıntılı anlatır.

Aynı sayfadaki birden fazla popup'ı çakışma olmadan nasıl yönetirim?

Bir sayfada birden fazla popup yönetmek, iki popup'ın aynı anda açılmasını önleyen merkezi bir state gerektirir. Hangi popup'ın açık olduğunu izlemek için React Context veya Redux gibi bir state yönetim kütüphanesi kullanın. CSS ve z-index çakışmalarını ayırmak için her popup'ı bir React portal'ı üzerinden render edin. Öngörülebilir eşleştirme için her popup bileşenine benzersiz bir key verin. Test için Storybook actions eklentisi, çoklu popup etkileşimlerini izole biçimde denemenizi sağlar.

TypeScript ile React popup oluşturabilir miyim?

Evet, TypeScript popup bileşenlerine gerçek bir değer katar. Popup'ınızın prop'ları için (açık durum, kapatma fonksiyonu, children ve içeriğe özel prop'lar) arayüzler tanımlayın; tür uyuşmazlıkları çalışma anında değil, derleme anında ortaya çıkar. reactjs-popup, MUI ve Headless UI dahil başlıca popup kütüphaneleri TypeScript tanımlarıyla gelir. Bu rehberdeki her bileşenin türleri TypeScript 6.0 ile kontrol edildi. TypeScript React el kitabı, bileşen tipleme kalıplarını derinlemesine anlatır.

React popup'larını etkili şekilde nasıl test ederim?

Birim testleri için Jest ve React Testing Library kullanın: popup'ın tetikleyiciye tıklanınca açıldığını, kapatma butonuyla ve Escape tuşuyla kapandığını doğrulayın. Erişilebilirlik gerilemelerini yakalamak için ARIA özniteliklerini de kontrol edin. Uçtan uca klavye testleri için Cypress veya Playwright kullanın. Önemli uç durumlar şunlar: art arda hızlı açıp kapatma ve kapandıktan sonra odağın tetikleyiciye dönmesi. React Testing Library belgeleri erişilebilir seçici stratejilerini anlatır.

React popup'ları SEO'yu nasıl etkiler?

Popup'lar SEO'ya kendi başına zarar vermez, ama rahatsız edici uygulamalar zarar verebilir. Google'ın rahatsız edici geçiş sayfaları ve diyaloglar rehberine göre bunlar, arama motorlarının içeriğinizi anlamasını zorlaştırır ve arama performansını düşürebilir. Güvende kalmak için tetikleyiciyi ilk render'dan sonraya bırakın, popup açık olsa da olmasa da sayfa içeriğini Googlebot'a erişilebilir tutun ve kapatmayı belirgin yapın. Çıkış niyeti popup'ları Google'ın botu için hiç tetiklenmez, çünkü bot fareyi hareket ettirmez. İngilizce Google'ın geçiş sayfası popup kuralları yazımız konuyu daha ayrıntılı anlatıyor.

Büyük bir React uygulamasında popup state'ini yönetmenin doğru yolu nedir?

Büyük uygulamalarda popup görünürlüğünü yerel bileşen state'i olarak tutmak ölçeklenmez. Aynı popup'ı birden fazla bileşen açıyorsa ya da içerik global verilere (oturum durumu, kullanıcı profili, sepet içeriği) bağlıysa, popup state'ini bir Context provider'a veya kullandığınız state yönetim çözümüne taşıyın. Hangi popup'ın aktif olduğunu ve ne göstereceğini izleyen tek bir PopupManager context'i kurun. Böylece yinelenen popup'lar oluşmaz ve analitik takibi tek bir yerde toplanır.

Bu blog yazılarına da göz atın:

• Vue Modal Popup'lar Nasıl Oluşturulur?
• Python ile Popup Nasıl Oluşturulur?
• PHP ile Web Siteniz İçin Popup Nasıl Oluşturulur?
• Bootstrap ile Siteniz İçin Popup Nasıl Oluşturulur?
• Angular'da 4 Farklı Yöntemle Popup Nasıl Oluşturulur?