You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
react-use-modal is a custom hook that provides a flexible and reusable way to manage modals in React applications.
6
6
7
+
Use a single line of `jsx` tag to insert your `Modal component` in page and use `useModal` configuration as props. Then go from there: update the same modal with dynamic content with functions provided by the hook.
8
+
9
+
In its basic implementation `useModal` lets you manage multiple modals in page in a reusable way without the need to write complex jsx code with as many Modal components (and relative states) as the number of different modals you want.
10
+
7
11
## Highlights
8
12
9
-
- Great **flexibiliy** with single _jsx_ tag updated dynamically
10
-
- Small and minified **bundle size**
13
+
- Great **flexibiliy**: use a single `jsx` tag updated dynamically for all the modals in you page...
14
+
- ...or decouple part of the logic from the hook and manage it yourself in your page/component
> _Basic example: click on "Show modal" button will execute `setModalConfig` with the config we defined_.
108
+
109
+
### Alternative
110
+
111
+
#### **Update** current config **partially**
112
+
113
+
Maybe you want to update only part of current `modalConfig`, let's say we have an open modal and we would like to change part of it's content when the user presses one of it's buttons. We can achieve this by using the functino `updateModalConfig` returned by the hook like so
"Content message of the modal inside a component of your choice",
125
+
buttons: [
126
+
{
127
+
text:"Cancel",
128
+
},
129
+
{
130
+
text:"Confirm",
131
+
disableClose:true,
132
+
onClick: showSecondModal,
133
+
},
134
+
],
135
+
});
136
+
137
+
constshowSecondModal= () => {
138
+
updateModalConfig({
139
+
title:"I'm the second modal",
140
+
children:
141
+
"Are you sure you want to proceed?",
142
+
buttons: [
143
+
{
144
+
text:"Yes, I am!",
145
+
},
146
+
],
147
+
});
148
+
}
149
+
150
+
151
+
// ... same jsx content as seen above
152
+
153
+
};
154
+
```
155
+
156
+
Here we've added a second button, the cancel button simply abort the operation closing the modal (so has no need for additional handlers, the confirm button is stopped from closing the modal, we pass it a handler which calls `updteModalConfig` from the hook and we update with it only the parts of the config that we need.
> _Alternative usage: here you can see `updateModalConfig` in action, passing from previous config (left) to partially modified one (right)_.
161
+
162
+
#### Decoupled logic
163
+
164
+
If you have some complex, maybe verbose piece of `jsx` (eg. for `children` or `buttons`) you can decouple some props handling from the hook thus leveraging from it only part of the configuration while managing the other part manually in your page/component, let's see an example for state dependent children.
Here yoy can see an example of `useModal` usage with non-empty initial configuration, showing the modal through `showModal` function and more importantly the decoupled/rewritten props `children` and `buttons`. This pattern can be used for complex, verbose or state dependent content.
0 commit comments