There are three easy steps to create a Modal in React Js
- Create a page overlay
- Create a Modal component
- Create a component to show the Modal in the overlay
I use a React portal to host my overlay to make my page overlay reusable and global to my application. Refer to the article Building a modal with Reactjs portal to learn more about React Portals.
1. Create a page overlay
Edit the index.html file in the public folder and add a div to mount the overlay. My div id is overlay. That is separate from the root div that mounts the main application.
<body>
<div id="overlay"></div><!-- to mount the overlay -->
<div id="root"></div><!-- to mount the app -->
</body>The next step is to make a component to render the overlay. I control the overlay with a function passed into the overlay component.
import { ReactNode } from "react"
import ReactDOM from 'react-dom';
import styles from "./Overlay.module.css"
interface OverlayProps {
children: ReactNode
hideOverlay: () => void
}
export const Overlay = (props: OverlayProps) => {
return ReactDOM.createPortal(
<div className={styles.overlay} onClick={props.hideOverlay}>{props.children}</div>,
document.getElementById("overlay")!)
}
My overlay styles are in a CSS module called Overlay.module.css. That is where I set the CSS properties of my overlay.
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}2. Create a Modal component
Now it's time to create the Modal component.
import styles from "./Modal.module.css"
interface ModalProps {
content: string
}
export const Modal = (props: ModalProps) =>{
return(
<div className={styles.modalContent}>
<span className={styles.close}>×</span>
<p>{props.content}</p>
</div>
)
}
My modal styles are in Modal.module.css
.modalContent {
background-color: #ffffff;
margin: auto;
padding: 20px;
border: 1px solid rgb(96, 82, 82);
width: 80%;
}
.close {
color: #444141;
float: right;
font-size: 30px;
font-weight: bold;
}3. Create a component to show the Modal in the overlay
Now I have the overlay and the Modal. It's time to place the Modal in the overlay.
import { useState } from "react"
import { Modal } from "./components/modal"
import { Overlay } from "./components/portal"
export const App = () => {
const [show, setShow] = useState<boolean>(false)
const showModal = () => {
setShow(true)
}
const hideModal = () => {
setShow(false)
}
return(
<>
{show &&
<Overlay hideOverlay={hideModal}>
<Modal content="LearnBestCoding Modal"/>
</Overlay>
}
<button onClick={showModal}>Show Modal</button>
</>
)
}
export default App
