Theory

The Modal component is used to present content and interactive elements overlaid on the rest of the application's content. It typically appears as a popup dialog or overlay on top of the main content, temporarily interrupting the user's workflow.

Why Do We Need It?

1. Content Presentation:
   • Provides a way to display additional content or functionality without navigating away from the current screen;
   • Useful for presenting dialogs, alerts, notifications, or any content that requires user interaction or attention.
2. Focus Attention:
   • Can be used to draw attention to specific information, actions, or prompts;
   • Allows you to control the user's focus and guide them through the application's workflow.
3. Contextual Interaction:
   • Enables contextual interactions by presenting related content or options based on user actions or application state.

How to Work with Modal

• The Modal component is controlled through its props and state;
• We can toggle the visibility of the modal by setting its visible prop to true or false;
• Use the onRequestClose prop to specify a function that will be called when the user attempts to close the modal.

Example

Result

In Practice