Modal Show, Close, Hide & Toggle

React Modal Backdrop

Methods for responsive Popup with React Bootstrap 5. Show, hide / close or toggle a modal with react props.

Use MDB modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Note: Read the Modal API tab to find all available options and advanced customization

Here you can find the most common Modal props

Name Type Default Description Example
backdrop Boolean true Sets a backrop for modal <MDBModal backdrop={false} />
className String '' Add custom class to MDBModal <MDBModal className="class" />
closeOnEsc Boolean true Allows to close modal on Escape keydown <MDBModal closeOnEsc={false} />
modalRef Reference '' Reference to the modal element <MDBModal modalRef={modalReference} />
setShow React.SetStateAction '' Allows to pass the setState action to the Modal component which defines if modal is shown or not <MDBModal setShow={setExample} />
show Boolean false Sets visibility of the modal <MDBModal show={true} />
tag String 'div' Defines tag of the MDBModal element <MDBModal tag="section" />

Below you will find some of the most common use cases of modal props.

Modal Show

Modal is visible while show property in MDBModal component is set on true.

        
            
      import React from 'react';
      import { MDBModal } from 'mdb-react-ui-kit';
      
      export default function App() {
        return (
          <>
            <MDBModal show={true} tabIndex='-1'>
              ...
            </MDBModal>
          </>
        );
      }

Modal Close / Hide

But when you set the show property on the false modal will disappear.

        
            
      import React from 'react';
      import { MDBModal } from 'mdb-react-ui-kit';
      
      export default function App() {
        return (
          <>
            <MDBModal show={false} tabIndex='-1'>
              ...
            </MDBModal>
          </>
        );
      }

Modal Toggle

So then, by using the useState hook you can make your component interactive.

        
            
      import React, { useState } from 'react';
      import {
        MDBBtn,
        MDBModal,
        MDBModalDialog,
        MDBModalContent,
        MDBModalHeader,
        MDBModalTitle,
        MDBModalBody,
        MDBModalFooter,
      } from 'mdb-react-ui-kit';
      
      export default function App() {
        const [basicModal, setBasicModal] = useState(false);
      
        const toggleShow = () => setBasicModal(!basicModal);
      
        return (
          <>
            <MDBBtn onClick={toggleShow}>LAUNCH DEMO MODAL</MDBBtn>
            <MDBModal show={basicModal} setShow={setBasicModal} tabIndex='-1'>
              <MDBModalDialog>
                <MDBModalContent>
                  <MDBModalHeader>
                    <MDBModalTitle>Modal title</MDBModalTitle>
                    <MDBBtn className='btn-close' color='none' onClick={toggleShow}></MDBBtn>
                  </MDBModalHeader>
                  <MDBModalBody>...</MDBModalBody>
      
                  <MDBModalFooter>
                    <MDBBtn color='secondary' onClick={toggleShow}>
                      Close
                    </MDBBtn>
                    <MDBBtn>Save changes</MDBBtn>
                  </MDBModalFooter>
                </MDBModalContent>
              </MDBModalDialog>
            </MDBModal>
          </>
        );
      }