Building a React modal component using a custom Hook

Last modified February 15th 2023 | Source Code [GitHub] | #react

In this tutorial we’ll be building a custom React modal component that can be used to display a variety of web elements including: forms, alert messages, or images.

Let’s get started by using Create React App to setup our application:

npx create-react-app react-modal

In the /src folder create a new file called useModal.js which will contain the useModal() custom Hook. Custom Hooks should always start with use so that you can quickly tell that it’s a re-usable Hook:

import { useState } from 'react';

const useModal = () => {
  const [visible, setVisible] = useState(false);
  function toggle() {
    setVisible(!visible);    
  }
  return {toggle, visible}
};

export default useModal;Code language: JavaScript (javascript)

Also in the /src folder create a new file called Modal.js for the modal component itself:

import React from "react";
import ReactDOM from "react-dom";

const Modal = ({ visible, toggle }) => visible ? ReactDOM.createPortal(
  <div className="modal">
    <div className="modal-pop" role="dialog" aria-modal="true">
      <h3>Hello World</h3>
      <p>Et sit saepe velit tenetur et consequatur in. Nihil doloribus nulla nulla rem. Soluta illo et asperiores numquam earum nesciunt. Vero odio voluptatem sunt sunt laboriosam.</p>
      <button type="button" onClick={toggle}>Close</button>
    </div>  
    <div className="modal-overlay"></div>    
  </div>, document.body
) : null;

export default Modal;Code language: JavaScript (javascript)

If visible is true we use a Portal to render the modal into a DOM node that exists outside the DOM hierarchy of the parent component, in this instance the <body>. This is because modals need to be the last DOM element in a page to meet accessibility requirements.

We can now pull it all together by modifying the App.js file as follows:

import Modal from './Modal';
import useModal from './useModal';
import './App.css';

const App = () => {
  const {toggle, visible} = useModal();
  return (
    <div className="App">
      <button onClick={toggle}>Show Modal</button>
      <Modal visible={visible} toggle={toggle} />
    </div>
  );
}

export default App;Code language: JavaScript (javascript)

Finally add some basic CSS to App.css so we can test the functionality:

.modal-pop {
  background: #fff;
  border: 2px solid #aaa;
  border-radius: 5px;  
  z-index: 999;
  max-width: 420px;
  margin: auto;
  padding: 1em 2em 2em;
  position: relative;
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background-color: #000;
  opacity: 0.75;
}Code language: CSS (css)

You can now test the modal by running the npm start command.

Whilst this example is quite simple it demonstrates how to build functioning modal component that you can customise for use in future projects. Thanks for reading and be sure to check out my other tutorials on building React components.

Create a custom React star rating component

Creating a tab component in React

Setup a customisable multi-step (wizard) form in React

#AD Shop Web Developer T-Shirts

Building a React modal component using a custom Hook

Related Posts

#AD Shop Web Developer T-Shirts