Create Custom Modal Using React & Tailwind CSS
Post by: Niraj Dhungana
Posted on: Jan 14, 2022
#react# tailwind# modal
You if are familiar with react-native then we have a built-in Modal component. We can use it like this.
Here we need to import the Modal component and we can pass the state like visible to show and hide the Modal. Now in this post we will see how we can create that same kind of modal inside React using Tailwind CSS.
Things we are covering.
- Initializing the project.
- Creating a button to open a modal.
- Creating a modal itself.
- Handling the state to show and hide the modal.
Let’s start coding.
Initializing the project.
First you have to create a project using React and Tailwind CSS. And I hope you already have those thighs setup. If not then you can follow this doc to create projects with react and tailwind css.
Creating a button to open a modal.
Now I hope you have initialized your project. Now let's create a button using which we can open and close a modal.
This is the code that I am using to create this button. Here I have this div with flex and justify-center and item-center also you can see we have this width and height full of screen and that is because I want to make this button at the center of this container.
Now you should see something like this.
Creating a modal itself.
Now we have our button it is time to create the model itself. I am going to create this model with fixed height and width which is going to appear at the top of any component.
For that inside Tailwind CSS there is this very interesting class called
inset-0. So let's see how we can use it.
Inside this custom modal component first of all I am accepting these
children as the
prop of this component. Now let me explain the meaning of these
First two or three
classes are self-explanatory but here what we are doing first we are making its
position: fixed; and giving this
inset-0. Which means it will now cover the entire screen because it is fixed so it will appear at the top of any component.
flex properties will render children at the center of this
CustomModal component. Then we have this class called
bg-black for background,
bg-opacity-50 to give background an opacity of 50 and finally we have
backdrop-blur-sm to give our React Modal a blurry effect.
Now you should see something like this. If you render this modal inside the App component like above. Also you can use any of your components.
Handling the state to show and hide the modal.
Now we have our modal ready, let's handle the state so that we can show and hide this modal according to our need.
Here we are accepting another prop called
visible which will be a
boolean value. And if this value is
false we are rendering
null which means nothing.
Now we have the
visible which we can use to show and hide our Modal. We can manage this state inside the component where we are rendering the Modal.
Like here I can use this
showModal state inside the
App component because I am rendering the Modal inside App.js. And if you notice (line-10) I am using that onClick listenner to change the state or open the Modal component.
Now let’s see how we can close the modal for that. This time I will start with the
App component. Here I am going to pass a prop to our CustomModal called
onClose. Which will change the state of
false. See code below.
Now we will get that onClose prop inside our
CustomModal and use it to hide the modal.
Here we are first destructuring the prop (
onClose) then calling it inside the
handleBackdropClick method if the clicked element has the ID called
backdrop. Because if you don’t check the ID our modal will close anywhere we click. This is called event bubbling.
Also you can create a separate close button to close the Modal.
And don’t forget to add that
id=’backdrop’ inside the main container (line number 10).
Now if you render something inside the Modal like I am rendering this fake newsletter component. You will see something like this.