Create Modal with React Portals
Dengan menggunakan Portals pada react kita bisa memilih dimana kita dapat merender component pada DOM, tanpa harus berada dalam element root.
Kapan kita perlu menerapkanya?, dalam kasus ini saya pernah mengalami ketika ingin memunculkan sebuah modal yang cukup besar yang bersifat absolute, tetapi posisi modal dalam DOM nested didalam sebuah component yang memiliki style overflow scroll/hidden, sehingga modal yang muncul akan menyesuaikan ukuran dari parent, dan tidak tampil sesuai dengan yang kita inginkan, maka dari itu saya menemukan solusi dengan menerapkan Portals pada component modal tersebut, untuk menghindari style dari parent yang membuat tampilan kurang sesuai.
/public/index.html
Tanpa basi basi langsung kita coba lewat kodingan, tapi dalam percobaan kita gak akan terlalu fokus pada styling ya!!
- Pertama tentu saja kita buat project react, jalankan perintah pada terminal
npx create-react-app modal-react-portal2. Setelah itu kita tambahkan div pada file /public/index.html
di sini kita menambahkan div dengan id modal-box, dengan tujuan kita ingin merender component modal kita dalam modal-box.
3. Buat file /src/components/Modals/Modals.module.css
4. Buat file /src/components/Modals/Modals.js
ReactDOM.createPortal(child, container)fungsi di atas sudah tersedia di react, dan kita perlu import dari ReactDom, dalam fungsi tersebut memiliki dua argument
child berisi dengan sebuah component atau kode yang ingin kita render.
container berisi dom element, atau lebih tepatnya dimana target kita ingin memunculkan child.
5. Ubah code pada src/App.js
6. Saat kita jalankan, dan kita coba cek inspect element, terlihat component modal masih belum dirender
lalu ketika kita coba klik “Tampilkam Modal”, component akan di render di dalam modal-box, bukan dalam root
DEMO
reference :
1. https://www.instagram.com/p/Ca_3nWhgujz/
2. https://reactjs.org/docs/portals.html
3. https://reactjs.org/docs/create-a-new-react-app.html
