How modal dialogs work and how to add them to your React app

UI patterns is what makes the web what it is. It is a collection of repeated elements, arranged in ways that are aesthetically pleasing to the eye, optimized for different screen sizes and targeted at creating a positive user experience.

Modal dialogs is a popular user inter user interface pattern to display additional information without moving to another page. However, it can also affect the user experience (UX) if not implemented correctly.

But what exactly are modal dialogs? In a nutshell, modal dialogs are like popups that occurs when an action is required before the user is able to proceed to the next step.

Here is a quick rundown on when to use modals, how to implement modals in React and libraries that you can use for faster development.

When Should We Use Modals?

Modals can be helpful to display information while keeping the screen in its current state. Here are some typical places that modals are used:

1. When the user’s attention is needed immediately — If the user’s session has expired and has to sign in again.
2. To display warnings about a user’s action that has severe consequences or is difficult to reverse — When the user is about to deactivate the account.
3. When the user’s input is needed to complete a task — To subscribe to a newsletter, the user is required to enter the email address.
4. Show additional information about something on the parent page — To display a calendar event in more detail.

While modals are great, they should be used sparingly to prevent a negative user experience. Too many modals that doesn't require immediate action can reduce a user's positive response.

When to Avoid Using Modals

It's easy to use modals as part of your app's flow. However, too many modals can result in additional and unecessary clicks or taps, and a diversion of attention from what the user may actually be searching for. Here are scenarios where modals can hinder rather than enhance a user's experience.

1. To show error, wait, or success states

Modals are not effective for displaying user input errors, loading status, or success messages because they block the parent screen. Instead, it’s better to use them as a part of the user input.

2. System-initiated Modals for promotional purposes

System-initiated Modals interrupt the user’s current task and force them into doing a specific action. Modern-day users dismiss such uninvited Modal windows instinctively. Therefore, it is less effective to use them for promotional purposes.

3. Modals in mobile devices

Mobile screen real estate is minimal, meaning that all elements on the page needs to be curated based on priority. It is often difficult for users to view and manipulate the modal window. In addition to this, users also might be dealing with other UI elements such as a keyboard and nested scrollbars. In short, it is best to avoid modals on mobile devices.

Best practices to implement the Modal

Here is a user experience best practice guideline when it comes to implementing modals.

Make the dismiss control visible to the user

A good Modal should always be user-initiated. At the same time, the user should have the ability to close the Modal when needed. Some of the methods to implement this functionality are,

• Add explicit ‘Close’ / ‘X’ / ‘Cancel’ button.
• Support clicks outside the Modal Window to close it.
• Use keyboard accessible control (Escape key) to close the window.

2. Ensure users understand what they need to do, using a descriptive title.

Give clear context on the Modal functionality using a proper title, indicating what’s expected from the user

Prioritize the content and size the window appropriately.

A Modal window must contain only the essential information and actions with a minimum number of sentences. If the content requires a scrollbar, it’s better to use a regular page instead of a Modal.

Put the Modal window on focus

Some methods that can be used to highlight the Modal window are as follows.

• Put the Modal directly in the user’s line of sight. It’s better to position the Modal at the top half of the page.
• Ensure that the Modal is visually distinct from the background page. As shown in the above figure, darkening the window’s background will help the user understand the Modal is located above the parent content and cannot interact with the parent content.

Avoid nested Modals

To avoid visual complexity, it’s always best to prevent Modals that trigger another Modal window.

Building Modals in React

In React, the whole application is treated as one large component with many child components. Therefore, components can be deeply nested even in a simple application. This happens due to the way how the virtual DOM is structured. So, you might find it challenging to render modals conventionally even with the help of some CSS tricks.

However, with the introduction of Portals in React 16, we can easily render modals into a DOM node outside the parent component’s DOM hierarchy.

Here is how to implement a simple modal window in React using Portals and some best practices to enhance the UX.

Here is a quick rundown of the above screenshot.

1. Modal.js — File containing the modal component.
2. App.js — File containing the main App component from which will call the Modal
3. Modal.css — File containing the styles applied to Modal

Here is the implementation code for Modal.js:

import React,{useEffect} from "react";
import ReactDOM from "react-dom";
import '../Modal.css';

const Modal =props=>{
  
    const closeOnEsc = (e) =>{
        if((e.charCode||e.keyCode)===27){
            props.close();
        }
    }

    useEffect(()=>{
        document.body.addEventListener('keydown',closeOnEsc);
        return function cleanup(){
            document.body.removeEventListener('keydown',closeOnEsc)
        }
    },[])
    
  
    return (
      props.open? ReactDOM.createPortal(
        <div className = 'modal'>
            <div className = 'content'>
                <div className = 'modal-header'>
                    <h4 className = 'modal-title'>Modal component</h4>
                </div>
                
                <div className = 'modal-body'>
                    Add the content here
                
                </div>
                <div className = 'modal-footer'>
                    <button onClick= {props.close}>Close</button>
                </div>
            </div>
             
        </div>,document.body):null
    );
  }


export default  Modal;

This functional component takes two props:

1. open— Indicates whether to render the modal.
2. close — Hides the modal by invoking the handleClose() function in App.js.

Here is the styles used for Modal.css. This is the basic layout and for demonstration purposes only.

.modal {
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
 
 
}
.content {
  width: 500px;
  background-color: white;
  padding: 20px;
  border: 2px solid black;
  border-radius: 20px;
  margin: auto;
  text-align: center;
}

.modal-body{
  padding: 10px;
}

The Modal component can be used within App.js as shown below.

import { useState } from 'react';
import Modal from './components/Modal';

function App() {
  const [open, setOpen] = useState(false);
  function handleClose(){
    setOpen (false);
  }
  function handleOpen(){
    setOpen(true);
  }
  return (
    <div className="App">
     <button className="button" onClick={handleOpen}>Open Modal</button>
     <Modal open = {open} close = {handleClose}/>
    </div>
  );
}

export default App;

Now, you have a simple, reusable Modal with minimal code and no required dependencies.

Alternative Libraries for React Modals

Implementing the basic functionalities of a Modal is relatively straightforward. But it can take a bit of effort to enhance the UI and UX if we implement them from scratch. Fortunately, there are plenty of libraries that can help you to build better UIs with customizations. Here are three that you can use instead of building your own.

1. Dialog component from Material UI

MUI dialog provides implementation guides to a wide range of Modals. They vary from basic Modals with less content to Modals requiring user inputs and different transitions.

They are also easily customizable as per the functional requirements. The well-written documentation provides examples for some of the most common Modals, making the developers’ work much more manageable.

2. react-modal-video

We can render and display videos inside a modal component using the react-modal-video package without navigating to a separate page to view the video.

The video sources supported are YouTube, Vimeo, custom resources and can be configured for native video playback functionalities. In addition, the Modal can be configured for various animation transitions and is accessible for keyboard navigation and screen readers.


3. Rodal

Rodal is one of the few open-source React Modals with a focus on animations. It supports nine different animation types and a list of props inclined towards controlling the animated behavior, such as the duration.

Wrap up

Modals interrupts the user flow and demands attention. While they are great for compulsory tasks such as logging in again after an expired session, they should be used with care and sparingly. Too many modals can end up annoying the user and build up a negative user experience.