Create PopUp Modal Using State Manager in React

Hey dude welcome, Today i want to continue a new article about the modal in react. This article is the next part of article before. if you're not know. Please read the article before about Create Popup Modal In React

In this article we will learn about make a powerful and complex modal type in react using any State Manager

Background & Use Case

Many of you may ask the same question about Why should use a State Manager to handle Modal?. Alright, To make any modal you can follow any approach like Using React Context or using Simple Method. However in Complex and Big Application we will handle many modal in single module. Also any modal will need in the global scope.

That's why we can use the state manager to make the modal accessible from everywhere in your application components.

Concept

To make a modal work with state manager it's kind a like easy stuff. We just need to make a simple modal, but to show and hide we can use the state manager.

In this case i will pick simple and powerful state manager as example, Of course it's zustand. you also can use ant state manager like Recoil, Jotail, Redux, etc. The concep is pretty the same and you just need to modify a little bit. If you just want to make this as you're first time to using state manager i will recomended using zustand.

Ok, before we jump in, to make this modal there some point as step by step.

1. Create Simple Modal
2. Create Hooks
3. Handle Show & Hide
4. Passing Data & Dynamic Content

1. Create Simple Modal

We need to prepare and make any simple modal for the example. Create a new file call StateModal.js and create a simple component with reference in modal

If you're not understand this part, please read my article before about make simple modal in react

2. Create Hooks

The way we cna handle the modal in global, or component is by using the hooks. So the main key here's is the hooks. In this example i will using zustand.

• First, Install the zustand in your react application

  // install zustand using npm
  npm i -S zustand

  //install zustand using yarn
  yard add zustand

• Create a file in hooks folder call modal.js and put the code to make a simple hooks for confirm modal

If you need more than confirm modal, we can create a new modal and add new property in modal hooks to show and hide like before.

And now, your hook are ready to use in any component to show the modal globaly.

3. Handle Show & Hide

To handle the show the modal, first we need to put the hooks that specify to the modal component and one side in other component to show the modal like Header, Button, etc.

To show the modal we need to put the hooks in parent where will trigger the modal to show. Example in App will show the modal form button

Now, we need to modify the modal and only show if the state from hook has changed. Inside the modal component we just need to wrap the modal in if statement

Now you're ready to show the modal. To hide the modal you can follow the close Manualy using hooks by calling modal.confirm.hide() or using any approach for closing modal like when user click outside, or by pressing Esc key

4. Passing Data & Dynamic Content

The way we can passing some data like title, desc, or any data into the modal from hooks is by passing some argument from the show method. But before that we need to change the hooks a little bit.

Ok, that the point to make the simple modal using State Manager. If you have any preference for State Manager you also can follow the same way to make this work.

If you have any trouble, or struggle please contact me. Please give any comment and like.