How to Close a Modal and a Dropdown when clicked outside in React
Detect outside click in React. Practical example on how to close a modal and a dropdown when clicked outside. Also explains how to create a Modal in React using portal
Modal Code: https://github.com/collegewap/yt-reac...
Dropdown Code: https://github.com/collegewap/yt-reac...
Modal Demo: https://yt-react-modal.vercel.app/
Dropdown Demo: https://yt-react-dropdown.vercel.app/
Blog Post: https://www.codingdeft.com/posts/reac...
Chapters:
0:00 Introduction
0:30 Dropdown project Setup
3:17 Styling the dropdown
7:50 Closing the dropdown
12:27 Modal project Setup and React Portals Overview
15:11 Modal creation using React Portals
17:47 Styling the Modal
23:14 Closing the modal when close button is clicked
24:02 Closing the modal when clicked outside
26:24 Hiding the scrollbar when modal is open