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>
</>
);
}