Modal is a common UX element. A modal is a dialog box/popup window that is displayed on top of the current page. You must have used pop-ups and notifications for your website. For some people pop-ups are really annoying😫 if it doesn’t behave as it should. It must have good UI/UX.

In this article, we’re going to create an efficient Modal component🤩 from scratch without using any library.

Our main goal is to create an efficient modal which,

• Has a good layout
• Doesn’t break ui when we use overflow in the parent component
• Can render content Dynamically
• Clean and Elegant animation
• Looks good (good UI)
• Have more control for User (like clicking outside can close modal) etc.

Let’s get started!

#react #reactjs