Creating a Customizable Modal in React JS

React JSJavascript LibraryFront End Technology

In this article, we will see how to make a customizable modal in React JS with multiple buttons which can be used in many types of projects like on landing pages or travel websites. A modal is a message box that is displayed on top of the screen. We can use Modals as a subscription box; we can also add animation to a Modal using CSS.


First create a React project −

npx create-react-app tutorialpurpose

Go to the project directory −

cd tutorialpurpose

Download and install the react-modal package −

npm i --save react-modal

We can use this package to add simple premade modals inside any React project. It also gives you access to add default stylings.

Add the following lines of code in App.js

import React from "react";
import Modal from "react-modal";

const customStyles = {
   content: {
      top: "50%",
      left: "50%",
      right: "auto",
      bottom: "auto",
      marginRight: "-50%",
      transform: "translate(-50%, -50%)",

export default function App() {
   let subtitle;
   const [modalIsOpen, setIsOpen] = React.useState(false);
   function openModal() {
      //This function tell what should do when clicked open

   function afterOpenModal() {
      // references are now sync'd and can be accessed. = "#f00";
   function closeModal() {
      //This function tell what should do when clicked close

   return (
         <button onClick={openModal}>Open Modal</button>
            isOpen={modalIsOpen} //if modal is open
            onAfterOpen={afterOpenModal} //what to do after modal open
            onRequestClose={closeModal} //what to do after modal close
            contentLabel="Example Modal">

            <h2 ref={(_subtitle) => (subtitle = _subtitle)}>Hello</h2>
            <button onClick={closeModal}>close</button>
            <div>I am a modal</div>
               <input />
               <button>tab navigation</button>
               <button>the modal</button>


The concept is simple. On clicking the button, the state changes to true and when it is true, the modal opens. On the modal, there is button, clicking on which changes the state to false and it closes the modal.

We also added simple styling and a set of buttons on the modal for different functionalities.


On execution, it will produce the following output −

Published on 29-Sep-2021 07:54:34