Modal Component Implementation in React

Modals component are excellent tools for grabbing a user’s attention quickly. They can be used to gather user data, deliver information, or motivate users to take action.

It’s fair to argue that developing modals can require some patience. Keeping track of all the layers, DOM hierarchy, and z-index values is difficult. Other features that must be presented at the top level, like overlays or tooltips, are likewise challenging to implement.

A component or element in a React application is mounted into the DOM as a child of the closest parent node. The conventional layer hierarchy is as follows, going from top to bottom:

root node => parent nodes => child nodes => leaf nodes

The child cannot display on the top layer and is restricted to the parent node’s viewable area if the parent node has an overflow attribute set to hidden or contains items at higher layers. To move the kid to the top layer, we can attempt setting a very high z-index value, although this method can be time-consuming and is not always effective. Here’s a brief summary of Ways to Set Focus on an Input Field After Rendering in React that you don’t want to miss out.

React Portals are advantageous in this situation. The parent-child relationship between components is not jeopardised when an element renders outside the normal hierarchy thanks to React Portals.

<div>
      <button>
        Modal
      </button>
</div>

Toggling a Modal’s state:

The modal uses show and hide as its method. Because React has a built-in toggling state, achieving 

<button  onClick={e => {
    this.showModal();
 }}
> 
   show Modal 
</button>

Function: 

state = {
    show: false
  };
  showModal = e => {
    this.setState({
      show: true
    });
  };

Model Components: 
<Modal show={this.state.show} />

Example:

Dashborad.js

import React, { Component } from "react";

class Dashboard extends Component {
  constructor() {
    super();
    this.state = {
      show: false
    };
    this.showModal = this.showModal.bind(this);
    this.hideModal = this.hideModal.bind(this);
  }

  showModal = () => {
    this.setState({ show: true });
  };

  hideModal = () => {
    this.setState({ show: false });
  };
}

export default Dashboard

import React, { Component } from "react";

class Dashboard extends Component {
  // ...
  render() {
    return (
      <main>
        <h1>React Modal</h1>
        <button type="button" onClick={this.showModal}>
          Open
        </button>
      </main>
    );
  }
}

export default Dashboard

Model.js(Components)

import './modal.css';

const Modal = ({ handleClose, show, children }) => {
  const showHideClassName = show ? "modal display-block" : "modal display-none";

  return (
    <div className={showHideClassName}>
      <section className="modal-main">
        {children}
        <button type="button" onClick={handleClose}>
          Close
        </button>
      </section>
    </div>
  );
};

First imported is the Modal component from react-modal. Everything inside the Modal component will be displayed as a modal dialogue. The dialog’s visibility is controlled by the isOpen state variable.

The Modal component is set up with the following properties:

The isOpen attribute governs how visible the modal is.

When we request to close the dialogue, the onRequestClose method is triggered. To conceal the dialogue in our scenario, we modify the isOpen state variable in this function.

The contentLabel attribute specifies how screen readers should be informed of the modal.

Example:

import React, { useState } from "react";
import "./styles.css";

import Modal from "react-modal";

Modal.setAppElement("#root");

export default function App() {
  const [isOpen, setIsOpen] = useState(false);

  function toggleModal() {
    setIsOpen(!isOpen);
  }

  return (
    <div className="App">
      <button onClick={toggleModal}>Open modal</button>

      <Modal
        isOpen={isOpen}
        onRequestClose={toggleModal}
        contentLabel="My dialog"
        className="mymodal"
        overlayClassName="myoverlay"
        closeTimeoutMS={500}
      >
        <div>My modal dialog.</div>
        <button onClick={toggleModal}>Close modal</button>
      </Modal>
    </div>
  );
}

Conclusion:

With the help of the react-modal package, we learned how to display modal dialogues in React. It offers the Modal component, which handles modal positioning and overlay display. You may find it useful that we also looked at some different methods for displaying modals in React.