Modal Boxes in React
What is it?
A modal box is a type of User Interface (UI) component that is displayed in a separate popup window than the content you’re currently viewing already. While there are various UI components like Alerts, Popup, Flash Notice, Lightbox, etc we’ll be focusing on modal boxes specifically. Modal boxes are for doing a separate action. An example maybe clicking a button that says “Invite Friends” and then a separate window will pop up on the current page that you’re on. You can then probably search through your friends list and click to add a friend to a group or group message.
Implementation
Before anything you’ll need to install react-modal. There are two ways to install the component:
npm install --save react-modalyarn add react-modal
Next you’ll need to import Modal from react-modal in the Component file you’re trying to add a Modal box to.
import { useState } from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';Modal.setAppElement('#main'); /*defaulting to #main but it should be whatever appElement you want to bind the modal to */function Example() {const [ showModal, setShowModal ] = useState(false);
function openModal(){
setShowModal((showModal) => !showModal);
}
function closeModal(){
setShowModal((showModal) => !showModal);
}
function afterOpen(){
// you can access any variable from Example.js here.
document.querySelector('h1').style.color = "red";
}return (
<div>
<button onClick={openModal}> Open Modal </button>
<Modal isOpen={showModal} onAfterOpen={afterOpen} onRequestClose={closeModal} contentLabel="Example Modal" className="Modal" overlayClassName="Overlay">
<button onClick={closeModal}> Close Modal </button>
<div><h1>Modal Content</h1></div>
</Modal>
</div>
);}ReactDOM.render(<Example />, document.getElementById('main'))
You must connect the Modal to a specific element in your application using Modal.setAppElement('#appElement') . Then you have to create a state variable, here I name it showModal and set it equal to falseat first. Next I defined two functions that will be called when you click the button to open a modal (openModal)and when you click the button to close the modal (closeModal). I also created a function called afterOpen that allows us to perform an action with any variable in its parent class, i.e: we can change the color of an h1 tag.
Next in the actual return statement for the Example component, we must call the <Modal /> component with the props of isOpen,onAfterOpen,onRequestClose,contentLabel,and overlayClassName.
isOpen- is the prop that contains the state variable showModal .
onAfterOpen- is the prop that performs certain actions, whether it be stylistically or DOM related. You can customize the function you pass into this prop.
onRequestClose- is the prop that calls on a function that closes the Modal box/ sets the state variable back to false.
contentLabel- is used to improve accessibility. It’s value is set as an aria-label on the modal element. It helps screen readers add a label to an element that would otherwise be anonymous.
overlayClassName- is the prop that allows you to call .Overlay in your css file and design the CSS.
Will result in:
Summary
Modal boxes are really useful UI components that will help add extra functionality to your application. I highly encourage you to take a look at the documentation if you’re trying to implement this as well. A nice resource to use is https://codepen.io/. It lets you edit HTML, CSS, and JS all in one browser.
