Modals are something that we have to add often into our React app.
To make this task easier, we can use existing component libraries to add them.
In this article, we’ll look at how to add a modal into our React app with the Styled React Modal and react-overlays libraries.
Styled React Modal
The Styled React Modal library lets us add a modal easily into our React app.
To install it, we run:
npm i styled-react-modal
Then we can use it by writing:
import React, { useState } from "react";
import Modal, { ModalProvider } from "styled-react-modal";
import { ThemeProvider } from "styled-components";
const StyledModal = Modal.styled`
width: 20rem;
height: 20rem;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
`;
function FancyModalButton() {
const [isOpen, setIsOpen] = useState(false);
function toggleModal(e) {
setIsOpen(!isOpen);
}
return (
<div>
<button onClick={toggleModal}>Click me</button>
<StyledModal
isOpen={isOpen}
onBackgroundClick={toggleModal}
onEscapeKeydown={toggleModal}
>
<span>I am a modal!</span>
<button onClick={toggleModal}>Close me</button>
</StyledModal>
</div>
);
}
export default function App() {
return (
<ThemeProvider theme={{}}>
<ModalProvider>
<FancyModalButton />
</ModalProvider>
</ThemeProvider>
);
}
We add the FancyModalButton component to add the modal trigger.
Inside the component, we add the StyledModal inside the component.
It’s created from the Modal.style tag.
We control whether StyledModal is open or close with the isOpen prop.
The onBackgroundClick prop lets us run code when the background is clicked.
And onEscapeKeydown lets us run code when the Esc key is pressed.
We just toggle the isOpen state to open or close the modal since we pass that as the value of the isOpen prop.
Then we use the styled modal by passing it inside the ThemeProvider and ModalProvider .
react-overlays
We can use the react-overlays library to add a modal to our React app.
To install it, we run:
npm install react-overlays
with NPM or:
yarn add react-overlays
with Yarn.
Then we can use it by writing:
import React, { useState } from "react";
import styled from "styled-components";
import Modal from "react-overlays/Modal";
const Backdrop = styled.div`
position: fixed;
z-index: 1040;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #000;
opacity: 0.5;
`;
const AModal = styled(Modal)`
position: fixed;
width: 400px;
z-index: 1040;
top: 20px;
left: 30px;
border: 1px solid #e5e5e5;
background-color: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
padding: 20px;
`;
export default function App() {
const [show, setShow] = useState(false);
const renderBackdrop = (props) => <Backdrop {...props} />;
return (
<div className="modal-example">
<button
type="button"
className="btn btn-primary mb-4"
onClick={() => setShow(true)}
>
Open Modal
</button>
<AModal
show={show}
onHide={() => setShow(false)}
renderBackdrop={renderBackdrop}
>
<div>
<h4 id="modal-label">Text in a modal</h4>
<p>Lorem ipsum</p>
</div>
</AModal>
</div>
);
}
We create the Backdrop component, which is a div with some styles applied.
Then we create the AModal component, which is a modal that has a fixed position.
And we also set the background color and box-shadow to add some effects to show with the modal.
In App , we have a button to open the modal by calling setShow with true .
And we have the AModal component that shows the modal if show is true .
We pass in the Backdrop component as the value of renderBackdrop to render the backdrop.
onHide is called when we hide the modal.
Conclusion
We can add modals easily into our React app with the Styled React Modal and react-overlays libraries.
