Replacing Javascript window.alert with your own component in React
As a frontend developer you know the situation: you need a quick output capability to inform the user about something like a failed backend call. The first thing that comes to your mind is
Then you think: ok, failure is very seldom and I accept this not-so-nice-looking alert.
As it turns out, you code starts containing more and more alert statements and your product manager and UX team gets more and more annoyed of them. This article is about changing the situation in your React app! The idea: we provide a global replacement for the alert function that can be used without modifying your actual alert statements (only by adding something bespoke in your component, but more about this later).
The typical way to provide application wide stuff that is not a component is to use a React context provider. And that’s the way to go to replace window.alert. But first, let’s start to design our new “alert” output from scratch as a React component:
I use the Material UI Dialog component for the implementation but you are free to use something else (MUI has also an Alert component!) . We pass three props: the actual message to be displayed, a isOpen bool and the onClose function. If isOpen is “false”, the component is not displayed, otherwise this dialog appears on top of your application and displays message:
Note: the colours and typography in the screenshot are driven by the MUI Theme in my app.
In a next step, we have to find a way to provide this as a replacement of the window.alert. Now, the context provider comes into play that I suggested above:
The implementation follows a standard React context. We define a context that provides only one function called “alert”. Furthermore, we define a provider implementation that manages the actual function call. If alert(<message>) is called, the currently displayed message is set as React state and the alertIsOpen state is set to true. This triggers the Alert component to be displayed with alertMessage. The actual Alert component is provided as part of the children of the provider. If the Alert component is displayed and somebody clicks on the “Close” button, the onClose function is triggered that sets alertIsOpen to false. This prevents the Alert component from being displayed. That’s it :-)
Now, let’s have a look how to use the component. First, we have to wrap our app with the new context. You have to find the appropriate level in your context provider hierarchy if you have several contexts stacked into each other. Your typical App.tsx may look like this:
The new “alert” component will be available to all components below the <YourIncredibleApp /> component. The last thing to do now is to tell the components that use the old window.alert function that there is a new one. You can do this by using the context of the AlertContext like this at the beginning of each component using an alert() statement:
Don’t forget to add the import statement for the AlertContext in the corresponding file.
From now an, all “alert” calls in the modified component automatically use our implementation instead of the standard window.alert call. No changes to your alert() statements! Cool, isn’t it?
You may also integrate the new alert implementation in one of the existing context provider implementations you have, e.g., in the WindowContext I defined in one of my previous Medium stories Handle window resizing with a React context.
Thanks for reading and I hope the pattern somehow inspired you to try it out for own ideas.
