How to Build a Reusable Modal Component in Material-UI
If you’re familiar with React you know that building reusable components is the best way to keep from repeating yourself throughout your project. After all, we all want to be as ‘DRY’ as possible when coding.
Material-UI is a component library similar to React Bootstrap which gives you the ability to add pre-designed components to your React project. You can customize these component however you like. Material-UI is different than React Bootstrap in that it has a preferred or opinionated way of designing applications called Material Design. Material Design can help to take much of the guess work out of designing beautiful applications. If you’d like to know more about it, you can view that here.
Set Up
Before we get started you’ll need to make sure you have a couple of things set up. You’ll of course want to have Material-UI installed and ready to go. You can learn how to set it up here. It’s pretty easy to set up if you have used a component library like React Bootstrap before.
This article also assumes that you’re using Material-UI throughout your project. You don’t have to use only Material-UI in your project, but the look and feel of your application may be different if you’re jumping from React Bootstrap to Material-UI in the same project. I would recommend sticking to one or the other.
That all being said…Let’s get started!
Building Our Component
First, let’s import what we’ll need to make the component work like we want. We’ll also need ‘prop-types’ for a couple of reasons. First, it’s a good practice since React does not have type or prop checking by default. Second, it will give you or others working on the project knowledge of what props make the component work properly and give errors if those props are not satisfied. We’ll explain all of the props we are passing to the component in more detail when we review prop-types.
If you’re new to Material-UI you’ll noticed that for components with a lot of moving parts, they are themselves broken down into components. However, you’ll need all of these to ensure the entire component works correctly. So let’s break down what’s going on here:
Dialog
The Dialog component is the main holder of all the other components. It’s responsible for opening and closing the Modal as well as setting the width of the modal. You’ll notice that we made two of these props that we’ll have to pass in since we want full control over when the modal opens and closes.
DialogTitle & Dialog Context Text
These components gives the modal a title and subtitle, we’ve made both of these props so others can show the user whatever title and subtitle they like.
Dialog Context
This component holds all of the display content that the user will see when the Modal opens. Because we will reuse this Modal for any number of things throughout our project, we’ll need to add in a flexible prop called the children prop. This prop is so flexible, we can pass in whatever components we like to it and they will display inside our modal.
Side note: if you’re unfamiliar with the children prop, it’s a special prop that react gives you to pass children (other components that will be inside another component) to your component. This prop is useful if the parent component doesn’t know what kind of child the component will be ahead of time. If you want more info on children props you can read here
Dialog Actions
This component holds all of our actions on the modal. Currently we only have a close button on this modal and the action or function is a prop that we will be passing in. However, if we wanted to add more buttons we would add them here.
PropTypes
Let’s talk about PropTypes.
Below we have all of the props that our Component needs or can use to function properly. PropTypes are important because they allow you (in 1 month from now) or other developers to see exactly how to use your component. It tells them, not only ‘what’ to pass in but also the type that it will accept. This is super handy, because if they pass in the wrong type they’ll get an error message letting them know exactly what to fix. The best thing you can do is set yourself and other developers up for success.
Implementing Our Reusable Dialog Component
First, let’s import it.
Next, we’ll start to create our props. We’ll need to use state to hold the open and close state that our Component could be in. We’ll also need a function to close the Modal as well as one to open the modal. We’ll need to give the modal a name that our users will see and finally we’ll need to pass in either a component or an element to satisfy the children prop.
Now all we need to do is implement our Modal.
You can see that all of our props are being filled. The Children prop in this case is our h1. It is a ‘child’ of our custom component. However, it could be whatever JSX or component you’d like to add.
Final Thoughts
As you can see our modal works pretty well now and can be used across our app whenever we need it. The cool thing about Modals is that because they are hidden by default until you need them, you can literally put them anywhere in your other components. Hopefully this article helps you in creating all kinds of reusable components with Material-UI.
If you liked this article check out my other ones here.
