Pop-up Madness experimental UiKit 📧

Introduction

This application contains not only custom pop-up / pop-over UiKit but also a small social net mockup to test it and take a look on its functionality. This kit may be a nice foundation for more complex ones, here I've implemented:

• Dialog pop-up
• Fullscreen pop-up
• Overlaying pop-up
• Pop-over component
• Portal component
• Some helper components and hooks

Functionality

• <Portal /> is the main building component for all the pop-ups. All portals are appended one after another to the special <div /> with id="portals" which is created at the very beginning. This allows to show the last opened pop-up on the screen without caring too much about z-indexes, and to close them one by one.

• <OverlayingPopup /> is a frame for all the pop-ups which have dark overlay. It has nice animations and box for content:

• <Dialog /> is a variety of <OverlayingPopup /> but it has one or two action buttons, it can be used for interactions with user like a system dialog window:

• <FullscreenPopup /> is a template for pop-ups which have size of the whole screen:

• <Popover /> can be used when you need to place one pop-up inside another one withour any overlays and difficulties. Also, Popper library was used here:

Using this structural elements in this application I've also implemented:

1. Dark / light themes

2. Ability to change user information using pop-ups / pop-overs, and smooth animations
3. Custom hooks such as useClickOutside to track whether user clicks outside of pop-over's body and close it
4. Ability to close pop-ups one by one by pressing Escape (<EscapeListener /> component)

Tech stack

• Vite
• React + TS
• Redux Toolkit
• SASS
• Popper.js