Modal with React Hooks: Write less, do more
Modals are an integral part of a web application. Thousands of websites use modal extensively. It’s a simple, clean, and efficient way to show data to the user with minimal efforts.
There are many ways to implement a modal in your React app. You can find plenty of UI libraries providing attractive modal interfaces.
The conventional way is to create a re-usable component by creating a wrapper on these interfaces and use it wherever needed. This helps us to further customize it as per our need.
Now you have a fully functional Modal! Great! Isn’t it?
There’s a problem with this approach. It is too simple, too good to be true.
In this blog, we’ll understand what the problem is and learn to overcome it with the awesomeness of React Hooks.
So, let’s dive into it.
The typical way to create a reusable component is shown below.
Most of you might just pass a show flag and an onHide callback to open and close the modal, respectively and it’s content. It’s just a matter of requirement.
Once that is done, you use it as below.
Pretty Simple!! Or so it seems.
Did you see the problem yet?
Let me help you.
The problem
What if you have to add another modal. What will you do?
You will add another
- state to open/close the modal,
- handler to toggle the state on a click, and
- component itself (<ModalBase />)
For every modal you integrate, you will write the same amount of code mentioned above. In other words, Code Redundancy.
That got out of control very soon.
Okay. No need to worry.
Let’s see how we can fix this within a few easy steps using React Hooks.
The Solution
Let's start with understanding the mechanism of a modal.
There are 2 parts of the code -
- The dynamic part — the content of the modal and the other props, and
- The static part — the process of toggling the modal’s open state.
We’ll isolate both the parts into two separate code and use it throughout our app.
To achieve this, we use hooks. This will be done in 2 parts.
- Part 1: Moving all the above code to its custom hook.
- Part 2: Using Context API to make the dynamic part accessible throughout our app. For this purpose, I’m going to use unstated-next.
Part 1: Moving code to custom hook
Please refer to the below code.
Through this custom hook, we encapsulated the modal content and a helper function to set the various modal props. Then, we create a container using this hook. This container will eventually help us to expose the context globally.
Now move the static part i.e. the process of toggling the modal’s open state to a custom hook.
Here we use the container to get the context and use it to open the modal. There’s also a callback function to handle the closing of the modal.
Next, we write our modal component using both the hooks.
As you can see, we use the “container” to access the dynamic part and the “useToggle” hook to access the static part.
Part 2: Using Context API to expose the container
Finally, we expose this context globally to be accessible by the entire app.
Et Voilà! We are ready to use our modal.
Now all you have to do is use the container to push the modal content into the “modals” array using “showModal”. Like this.
The above code triggers two different sizes of modal using a button in a recursion.
You can trigger modal from anywhere in the app without worrying about the redundant part. All you need is “showModal”.
Other Use Cases
Well, this is just a basic setup. You can use the same setup for the simple use case of “one modal at a time”. This can also be used to set up the Pop-up Notification in your application.
Final Thoughts
We have merely scraped the surface. You can use your imagination to customize this further. To delve further deeper into this, here’s the link to the repo. I hope it helps.
Do share your thoughts with me.
Happy Coding!
