DEV Community

The neatest way to handle alert dialogs in React 🥰

Dmitriy Kovalenko on July 26, 2019

Time to read — 5 mins ☕️ Hola! Lazy dev here and we will talk about handling dialog alerts in react without tears 😢. If you are tired of tons of...

Read full post

Hammed Oyedele • Jul 27 '19 • Edited

Nice!!!

I have used this technique for 2 past React projects before ✌️✌️✌️

I used a global hook state manager that I created (github.com/devhammed/use-global-hook) then renders my custom Material UI Dialog component near routes in App.js then all I have to do is to call the showModal action (I use React.useReducer) whenever I need to:

showModal({
  title: "Hello",
  content: (<Typography>Hi</Typography>),
  actions: [] // buttons
})

Dmitriy Kovalenko • Jul 27 '19

Cool!

Tabrez Basha • Sep 17 '20

Cool, can you share some examples for your implementation?

Hammed Oyedele • Sep 17 '20

The implementation is almost the same with the one in this post but I used use-global-hook instead of context (though it uses context under the hood too).

cargallo • Nov 23 '19

Hi there! Nice solution. It throws an error when you click in either cancelo or accept button of the dialog...

proxyConsole.js:64 Warning: Failed prop type: The prop children is marked as required in ForwardRef(DialogTitle), but its value is undefined.
in ForwardRef(DialogTitle) (created by WithStyles(ForwardRef(DialogTitle)))
in WithStyles(ForwardRef(DialogTitle)) (at ConfirmationDialog.tsx:34)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Dialog))
in div (created by Transition)
in Transition (created by ForwardRef(Fade))
in ForwardRef(Fade) (created by TrapFocus)
in TrapFocus (created by ForwardRef(Modal))
in div (created by ForwardRef(Modal))
in ForwardRef(Portal) (created by ForwardRef(Modal))
in ForwardRef(Modal) (created by ForwardRef(Dialog))
in ForwardRef(Dialog) (created by WithStyles(ForwardRef(Dialog)))....

cargallo • Nov 23 '19 • Edited

Auto answering this.... changing this line solves the problem.

<DialogTitle id="alert-dialog-title">{title ? title : ""}</DialogTitle>

Onur Önder • Nov 19 '19

This is actually a really cool way to handle confirmations. The only minor problem is, when you press "agree" or "cancel", dialog content disappears just before the exit animation of the dialog completes. It creates some sort of a flickering effect. You need to watch carefully to see it, but if your exit animation duration is higher, you will end up with an empty dialog slowly fading away :)

Other than that, real cool way for confirmations and simple info dialogs!

Taras Dymkar • Jun 11 '20

So here is the fix of "flickering" effect which was caused by resetting the state before dialog is faded out.

Taras Dymkar • Jun 10 '20

Yeah, I'm not sure but looks like to solve this issue you need to reset confirmationState on material-ui`s Dialog onExited callback. And on close/submit just set "open" prop to false.

solflare • Jun 7 '20 • Edited

I know it's a bit late but thanks for the post, I found it really helpful! I was wondering whether or not using this service across multiple components would trigger a rerender for any component using the context any time a component called the confirm function and it seemed like it did. I added a useCallback around the openConfirmation declaration (with a setConfirmationState dependency) and it seemed to do the trick. Can anyone verify that this is the right way to go about this?

Jon Lauridsen • Jul 27 '19

Thanks, clear and concise. I’d like to try this.

YaniSouth • Sep 21 '20 • Edited

Hi, I did a copy of same code but I m getting this error, I hope you can help me.

( this doesn t allow me to upload image WHY GOD WHY?)

C:/Projects/yan/yan-frontend/src/components/Modals/ConfirmationService.tsx
TypeScript error in C:/Projects/malachite/malachite-frontend/src/components/Modals/ConfirmationService.tsx(52,8):
Type '{ open: boolean; onSubmit: () => void; onClose: () => void; } | { catchOnCancel?: boolean | undefined; variant: "danger" | "info"; title: string; description: string; open: boolean; onSubmit: () => void; onClose: () => void; }' is not assignable to type 'IntrinsicAttributes & ConfirmationDialogProps & { children?: ReactNode; }'.
Type '{ open: boolean; onSubmit: () => void; onClose: () => void; }' is missing the following properties from type 'ConfirmationDialogProps': variant, title, description TS2322

50 |       />
51 |

52 | <ConfirmationDialog
| ^
53 | open={Boolean(confirmationState)}
54 | onSubmit={handleSubmit}
55 | onClose={handleClose}

Tabrez Basha • Sep 17 '20

Is it possible to dynamically change the content of the dialog?
Example sandbox (will be ugly, but just for an example): codesandbox.io/s/neat-dialogs-fork...

Basically, I would like to know if this kind of API would suit for a proper Modal.

Nolan Rudolph • Jan 23 '22

I literally just made an account to say you're incredible, and your tutorial is flawless. Thank you <3

sirmd • Feb 9 '21

Hello! If I try to nest the children props inside the Provider instead of passing it as a prop it return a TypeError: PromiseReject called on non-object. Anyone have an idea why??