React'te Tailwind CSS ile Tekrar Kullanılabilir Modal Bileşeni Nasıl Yapılır

Kendi modal bileşenini yazmak istemek, bir kütüphaneye bağlı kalmamak istediğinde mantıklı bir tercih. Bu rehberde adım adım gidilecek, Vite ile yeni bir React projesi kurulacak, Tailwind CSS entegre edilecek ve sonra tekrar kullanılabilir bir modal bileşeni yazılacak.

Önce Node.js (v22 ve üzeri) ve bir kod editörü (VS Code tavsiye) gerekli. React Hooks, State, Props ve ES6+ JavaScript bilgisi de başlangıç noktası.

Proje Vite ile başlatılır çünkü hızlı ve hafif. Ardından Tailwind CSS kurulup konfigüre edilir, vite.config.js dosyası ayarlanır ve Tailwind direktifleri CSS dosyasına eklenir. Bu aşamada modal bileşeni için temel yapı hazırlanmış olur.

Modal bileşeni yazarken, açılıp kapanmasını kontrol eden state (isOpen), içeriği alan props ve kapatma fonksiyonu tasarlanır. Tailwind'in overlay ve animasyon sınıfları kullanılarak görsel olarak profesyonel bir modal elde edilir. Bileşen, başlık, gövde ve kapatma düğmesi gibi temel parçalara ayrılır.

Tekrar kullanılabilirlik sağlamak için modal, props aracılığıyla başlık, içerik ve düğme metinlerini kabul eder. Böylece aynı bileşeni farklı yerlerde farklı içeriklerle kullanabilirsin. Kapatma işlevi ise parent bileşenden gelen callback fonksiyonla yönetilir.

Bu yaklaşımın avantajı, harici kütüphane yükü olmadan tam kontrol sahibi olmak. Tailwind sayesinde stil yazma zahmetinden de kurtulursun. Proje büyüdükçe modal bileşenini kendi ihtiyaçlarına göre genişletebilirsin, form doğrulaması, animasyon, erişilebilirlik özellikleri ekleyebilirsin.