React Modals

Creating modals through React can be super simple! We’ll be going over how you can quickly and easily add a simple modal to your app too!

We will be using the react-modal package today. To install, you can use npm or yarn:

$ npm install --save react-modal
$ yarn add react-modal

Once you have this installed and a react program started, we will be updating the import files in the component you will be adding the modal to. We will also be using the State Hook. Below is an example of what to add to your imports:

Above we’ve also created a button which will later open our Modal. We’ll now add our Modal, state to tell our modal when it should be opened, and a click listener to the button to invoke changes to our state.

We will be first setting the state of our Modal to false. When the button is clicked, our click listener function will update state to true and thus open the modal.

Awesome! Just like that we’ve now created a modal.

We’ll probably want to be able to close this modal, so let’s add a button for that.

For this button’s click listener, we want to update state back to false, which will then close the modal.

Great! We can now also close our modal. Our modal is currently taking up most of our page, so we can add some styling to change that.

And jus like that we were able to add a modal to our App in a few simple steps!

Resources: https://www.youtube.com/watch?v=10FNqoPpNbE&ab_channel=Codevolution