React (Next.js) ve Tailwind CSS ile Animasyonlu Açılır Kapanır div Nasıl Yapılır?
Selam dostlarr! React ve Tailwind CSS kullanarak bir div’in nasıl animasyonlu bir şekilde açılıp kapanmasını sağlarız? Eminim birçok projede bu tip açılıp kapanan div’lere ihtiyaç duyuyorsunuzdur. Ben de bu nedenle elimden geldiğince detaylı bir şekilde adım adım göstereceğim. Hazırsanız, başlayalım! ⚡️
Bu makalede React’ın framework’ü olan Next.js, Tailwind CSS ve Typescript kullandığınızı varsayarak anlatım yapmaya çalışacağım. Kullanmıyorsanız bile açıklayıcı olacağına eminim 😁 Neden Next.js diye sormayın, sorarsanız da bilmiyorum valla daha kolayıma geldi Next.js ile yapmak.
React’ta bir div’in açılıp kapanması için birkaç yöntem var. Örneğin max-height = 0; ve max-height: auto; ile yapabiliriz fakat burada bir animasyon sağlayamıyoruz. Aynı şekilde display: none; ve display: block; ile yapabiliriz fakat bir animasyon sağlayamıyoruz. Dilerseniz hazır paketlerle de çözebilirsiniz ama ben paketsiz çözebilmek için anlatacağım yoldan ilerledim.
Yaptığımız işin canlı hali: https://acilir-kapanir-div-next.vercel.app/
(Repository linki aşağıda!)
Öncelikle basit bir arayüz tasarımı kodlayalım, sanırım componente “Accordion” adını verebilirim:
Şimdii gelelim bu componentin açık mı kapalı mı olduğunu tutacağımız state’i eklemeye:
isOpen değiştikçe bizim işlem yaptırmamız lazım. Eğer true ise o divin max-height’i, yüksekliği kadar olmalı. Yani biz o divin scrollHeight değerini kullanmalıyız. Bu yüzden bir de height diye bir state oluşturacağız ve useRef ile açılıp kapanacak olan divin referansını alacağız ki değerlerine erişebilelim:
Şimdi denerseniz başarılı bir şekilde animasyonlu bir açılır kapanır dive sahip olduğumuzu görebilirsiniz 🎉
Yalnız o da ne?! div açıkken ekranı küçültürsek yazılar içerik sığmıyor… Durun sakin, bunu da çözelim hemen. Öncelikle ekran boyutunun yeniden boyutlandırılmasını dinleyebilmek için resize listener’ı ekleyelim ve bu değer değiştikçe screenWidth state’ini güncelleyelim. Ardındaan yukarıdaki useEffect bloğundaki [isOpen] listesine bir de screenWidth ekleyelim ki ekran değiştiği zaman max-height güncellensin:
Eveeet… Başarıyla açılır kapanır bir div oluşturabildik. Hayırlı uğurlu olsun ama ben bir de buna varsayılan olarak açık mı kapalı mı olduğunu eklemek istiyorum diyelim. Celal Şengör’den bir alıntı yapsak mı? 😁
Nasıl yap’ıcaz onu be?
Props adında bir type oluşturalım. firstOpened diye bir parametre ekleyelim ve varsayılan değerini false yapalım:
type Props = {
firstOpened?: boolean;
};Sonrasında ilk oluşturduğumuz isOpen ve height state’lerinin ilk değerlerini şu şekilde güncelleyelim:
const [isOpen, setIsOpen] = useState(firstOpened);
const [height, setHeight] = useState(firstOpened ? "auto" : "0px");Son haline şöyle bi’ göz atalım:
Projenin tamamı: https://github.com/mehmetext/acilir-kapanir-div-next
Yapmamız gerekenler bu kadardı. Ben artık açılır kapanır div yapmak istediğim zaman bu yolu tercih edeceğim. Yani burada kullanılabilirliğini arttırmak size kalmış artık. Bunu daha iyi bir component haline getirip çok daha farklı şeyler yapabilirsiniz. Örneğin absolute yaparak açılır bir menü yapabilirsiniz.
Bu yol ne kadar doğrudur bir fikrim yok, ben kendime böyle bir çözüm buldum. Usta Nextçiler ve Reactçılar bu yolu yorumlayabilirlerse sevinirim. Onlar sayesinde ben de doğru yolu bulmuş olurum ^^
Son olarak ufak bi’ reklamm.
Kişisel Sitem: https://konukcu.dev/
GitHub Profilim: https://github.com/mehmetext
Bikodist Instagram Sayfam: https://www.instagram.com/bikodist
LinkedIn Profilim: https://www.linkedin.com/in/mehmetkonukcu
