- Read Tutorial
- Watch Guide Video
Now, working with modals in React is probably a task you're gonna have to take on a pretty regular basis. Modals are one of the standards types of page elements that most modern applications need to have in some form or another, so I thought this would be a good way of being able to create new blog posts.
So, let's walk through the finished example to see what our application's gonna look like. So I'm on the blog page here, and if I click this little plus icon here you'll see that the modal pops up,
and it also has a cool thing like a rich text editor, it has the drop zone, and everything like that, it's in an embedded form inside of the modal. Now I can click escape and it will close, I can also simply click anywhere else outside of the modal and it will also cancel it, so that is the behavior we're looking for.
The tool we're going to use to create this is called react-modal. It is by far the most popular and the most flexible modal NPM library out there, so let's walk through what that is. And so if you go to npmjs.com, you can just type in react-modal and you'll see that it's the very first one that pops up.
It's incredibly popular, you can see it has over 800,000 weekly downloads so it is a very popular library and it also has some great documentation. So you can see, all we're gonna do in this guide is install it in our application, and then over the next few guides we're going to see how we configure it.
But before we even install it in our app, what I wanna do is show you the documentation, because every modal that you're going to build is most likely going to have a few key, unique features.
And the best place to learn how to implement those is in the documentation and the examples. So if you scroll down here you can see some basic examples.
You can see how you can create custom styles, you can see what a basic set up looks like, even including an example with state management to control if the modal is open or not, along with a few key props that you can pass directly into it, so I definitely recommend for you to look at it.
It also has some really nice demos. So the very first time I had to implement a modal in React, this is exactly what I did, I went to the documentation page, and then I started looking at the examples. So if you click on this minimal example, it actually has the entire set of code directly in code pen so you can look at it.
Now, one thing I want to note is that if you've not looked at code like this before, I'm going to close everything here, just to make it easier to read, 'cause all we care about is the JavaScript code. You might see that some of this looks familiar and then sometimes you might see some code that looks a little bit different.
React is so flexible it makes it possible to write React code with a few key differences. So, a good example of this is, do you see in their example how it's class ExampleApp extends React.Component?
Well, when we write our code we usually just say Extends Component. And at the very top, and they've already installed and configured this particular code pen to be able to do this, but if at the very top, if I said import and then I said go to React and then inside of curly brackets, component, that's what we usually do. And then say from React, just like this, that's what we've been doing.
It's also possible to not include the component in the curly bracket and to do exactly what they did, which is to say React.Component and that accomplishes the exact same thing. So I just wanted to point that out, it has nothing to do with the modal, but part of this course is not just teaching you how to build these specific features, but also teaching you how to be a React developer so you can build any feature.
And a big part of that is how you can read documentation, and also how to recognize when something has been written slightly differently than maybe you learned, 'cause that is something that'll happen quite a bit with flexible libraries like React.
So, with all that being said, let's walk through this example. You can see it has this example app, it has a constructor, they're putting in all the same code that we usually are used to, such as super. It's setting a base state where showModal is set to false and then it has a view handlers, like handling the OpenModal, ClosedModal, and then it has some basic JSX code. If I were to stretch this up and click trigger modal, you'll see that this is a modal.
It's pretty basic, and that's part of the beauty of this tool, because you have the ability to customize this however you want. I've seen some other NPM libraries for modals that try to tell you how your modal should look, and what I found is many times that code will only take me so far, and then it becomes very difficult to customize that type of component or that type of library later on. I prefer a much more lightweight library like React Modal that gives me all of the options and flexibility I want so that I can build a feature how I need it to be.
So that is the demo, I definitely recommend for you to go and look at all of the documentation. Look at each one of the other examples, like we have here, just to see what's possible, it's a very helpful tool.
So with all of that, now let's install it. Open up visual studio code, and then you come and open up your terminal and if you're on a Mac you can also just open up the terminal application, type NPM i, short for install, react-modal.
npm i react-modal
And then this will go out to the NPM registry, pull this down, and assuming everything else is working, then we should have access to this NPM library and then we can go out and we can start building this feature. And it looks like everything worked, we didn't even get any warnings or anything like that, and if you open up your package JSON file, and scroll down you should now have React modal and at this time the version's around 3.8.1. But whenever you're watching this that may have changed, so don't worry about that version number.
So you now have React modal installed, and in the next few guides we're gonna start building out this modal feature.