Custom Alert Dialog in React

April 13, 2020

TL;DR

Completed code is at the bottom.

Every modern browser has two functions on the window object, alert and confirm, that allow developers to show a standardised prompt to users.

The alert function shows a simple blocking popup that contains important information, such as "This is not allowed.". The confirm function requires an input from the user in the form of a yes/no decision ("OK", "Cancel"), such as "Do you wish to proceed?", and then returns a boolean result.

These are super handy and easy to implement:

index.tsx

<button
    onClick={() => alert("This is a bad idea")}
>
    Launch Nukes
</button>
<button
    onClick={() => confirm("Are you sure!?") ? launch() : beSensible()}
>
    Launch them anyway!
</button>

In chrome this looks like the following:

This is great as it's easy and functional, however, it's not pretty and we are at the mercy of the browser for styling and functionality. The rest of this post is a walkthrough on creating a drop-in replacement using react function components and typescript.

Alert in React

To take control of style and functionality, and make the dialogs be more on-brand, we can recreate this feature in React and turn it into a reusable drop-in component.

For this example I will be using Material-UI (MUI) to do most of the heavy lifting for styling and modal functionality.

The first thing we need is a component to instantiate:

index.tsx

// set our material theme to dark mode
const theme = createMuiTheme({
	palette: {
		type: "dark"
	}
});
const AlertRoot: React.FC = () => {
	return (     
        // pass in our dark theme
		<ThemeProvider theme={theme}>
            {/* Sets an absolute root component as a clickaway handler and 
            	a container for content, which is appended to our root element */}
			<Dialog
				onClose={() => console.log("CANCEL")}
				open={true}
				disablePortal={true}
			>
                 {/* content components */}
				<DialogTitle>Title</DialogTitle>
				<DialogContent>
					<DialogContentText>A message!</DialogContentText>
				</DialogContent>
				<DialogActions>                    
					<Button onClick={() => console.log("OK!")}>
						{"OK"}
					</Button>
				</DialogActions>
			</Dialog>
		</ThemeProvider>
	);
}

Above is a basic function component that displays a MUI dialog when rendered. It contains a title, a message and an "OK" button that will eventually clear the component when clicked.

Append the Component

We now need a way to instantiate our component as we want the new product to be as close to alert as we can.

NOTE: This is not really a react-y way of doing this as we are directly manipulating the DOM, but it works. I would love to know of a more react focused way of achieving the same result, i.e. calling a function to render a temporary blocking component that returns a promise result.

index.tsx

// an ID to give our root element, can be what ever you like
const rootID = "alert-dialog";
// a base function that appends our component to the document body
function Create() {
    // see if we have an element already
	let div = document.getElementById(rootID);
	if (!div) {
		div = document.createElement("div");
		div.id = rootID;
		document.body.appendChild(div);
	}
    // render with react
	ReactDOM.render(<AlertRoot />, div);
}
// expose a function that we can reuse in our apps to call the alert
export function Alert() {
	Create();
}

We could now call our Alert function in a component and we would get something like the following:

index.tsx

<Button onClick={() => Alert("")}>
    {"Alert"}
</Button>

Adding Data

Now lets update our component and exported function so that we can provide a message and if needed, a title. First we need to update our exported function:

index.tsx

// add a message and title parameter. title is optional and defaults to "Alert"
export function Alert(message: string, title: string = "Alert") {
    // we pass these parameters to the create function
	Create(message, title);
}
// our create function now accepts the message and title variables
function Create(message: string, title: string) {
	let div = document.getElementById(rootID);
	if (!div) {
		div = document.createElement("div");
		div.id = rootID;
		document.body.appendChild(div);
	}
    // and we pass them to our component as props
	ReactDOM.render(
		<AlertRoot
			message={message}
			title={title}
		/>, div
	);
}

With our functions updated, we now need to update our component to accept the new props and display the values:

index.tsx

// add an interface that defines the new props
export interface IAlertProps {
	message: string;
	title: string;
}
// update the component to accept the props of our interface type
const AlertRoot: React.FC<IAlertProps> = (props) => {
    // destructure the props for easier access
	const { message, title, confirm } = props;
	return (
		<ThemeProvider theme={theme}>
			<Dialog
				onClose={() => console.log("CANCEL")}
				open={true}
				disablePortal={true}
			>
                {/* add the new prop values to our title and message containers */}
				<DialogTitle>{title}</DialogTitle>
				<DialogContent>
					<DialogContentText>{message}</DialogContentText>
				</DialogContent>
				<DialogActions>                    
					<Button onClick={() => console.log("OK!")}>
						{"OK"}
					</Button>
				</DialogActions>
			</Dialog>
		</ThemeProvider>
	);
}

We can now update our call of Alert to take a message and optional title:

index.tsx

<Button onClick={() => Alert("Our new message!", "Relevant Title")}>
    {"Alert"}
</Button>

Closing the Dialog

The last piece we need to add to make the component complete is a close function. As our component is controlled from outside our root app and is self contained, to close it, we can just remove it from the DOM. For this we need a reference to our root element, which we will hold in a useRef hook. On mount we will get and store a reference to the element and on close, remove the element:

index.tsx

// add the following after the props destructuring
// our root element ref
const root = useRef<HTMLDivElement | null>();
// on mount, get and set the root element
useEffect(() => {
    let div = document.getElementById(rootID) as HTMLDivElement;
    root.current = div;
}, [])
// provide a function that remove the root element from the DOM
function Close() {
    root.current?.remove();
}

We can then update our Dialog and Button components to call Close() when dismissed:

index.tsx

<ThemeProvider theme={theme}>
    <Dialog
        onClose={() => Close()}
        open={true}
        disablePortal={true}
        >
        {/* add the new prop values to our title and message containers */}
        <DialogTitle>{title}</DialogTitle>
        <DialogContent>
            <DialogContentText>{message}</DialogContentText>
        </DialogContent>
        <DialogActions>                    
            <Button onClick={() => Close()}>
                {"OK"}
            </Button>
        </DialogActions>
    </Dialog>
</ThemeProvider>

We now have a fully functional drop-in replacement Alert() that can be and fully customised to remain brand-centric.

Extending with Confirm

To be able to get the users response to a confirmation prompt, we need to extend our component to await an input and return the result.

We can now add a new exported function for Confirm and extend our Create function and our components props. To do this we create a new Promise<boolean> on mount and resolve it with a boolean result when a use clicks the button, which is then returned to the calling function.

The result is our alert pops with OK and Cancel buttons and awaits input. Once selected the result is sent back to the calling function and is allowed to continue. Bear in mind that the Confirm implementation is now an async/await operation as we need to return the promise result. The Alert function is not a promise so it can be dropped in as a direct replacement.

index.tsx

// completed code for Alert and Confirm
import { Button, createMuiTheme, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, ThemeProvider } from "@material-ui/core";
import React, { useEffect, useRef } from 'react';
import ReactDOM from "react-dom";
const theme = createMuiTheme({
	palette: {
		type: "dark"
	}
});
// type of alert to trigger
enum AlertType {
	ALERT,
	CONFIRM
}
// extended with the type prop
export interface IAlertProps {
	message: string;
	title: string;
	type: AlertType;
}
const rootID = "alert-dialog";
// our promise to be stored for resolve on input
let returnResponse: (value: boolean) => void;
const AlertRoot: React.FC<IAlertProps> = (props) => {
    // include type
	const { message, title, type } = props;
	const root = useRef<HTMLDivElement | null>();
	useEffect(() => {
		let div = document.getElementById(rootID) as HTMLDivElement;
		root.current = div;
	}, [])
	function Close() {
		root.current?.remove();
	}
	// called on OK
	function Confirm() {
         // only resolve if confirm type
		if (type === AlertType.CONFIRM) {
             // returns true
			returnResponse(true);
		}
		Close();
	}
	// called on cancel/dismiss
	function Cancel() {
         // only resolve if confirm type
		if (type === AlertType.CONFIRM) {
             // returns false
			returnResponse(false);
		}
		Close();
	}
	return (
		<ThemeProvider theme={theme}>
			<Dialog
                 // Cancel on dismiss
				onClose={() => Cancel()}
				open={true}
				disablePortal={true}
			>
				<DialogTitle>{title}</DialogTitle>
				<DialogContent className={styles.content}>
					<DialogContentText>{message}</DialogContentText>
				</DialogContent>
				<DialogActions>
					<Button
						color={"secondary"}
                          // confirm on ok
						onClick={() => Confirm()}
					>
						{"OK"}
					</Button>
                      {/* only display cancel if confirm type */}
					{
						type === AlertType.CONFIRM &&
						<Button
                              // cancel on cancel
							onClick={() => Cancel()}
						>
							{"Cancel"}
						</Button>
					}
				</DialogActions>
			</Dialog>
		</ThemeProvider>
	);
}
// pass in alert type
function Create(message: string, title: string, type: AlertType = AlertType.ALERT) {
	let div = document.getElementById(rootID);
	if (!div) {
		div = document.createElement("div");
		div.id = rootID;
		document.body.appendChild(div);
	}
	ReactDOM.render(
		<AlertRoot
			message={message}
			title={title}
			type={type}
		/>, div
	);
}
// new confirm method
export function Confirm(message: string, title: string = "Confirm") {
    // pass in type
	Create(message, title, AlertType.CONFIRM);
    // set our promise for resolve on input
	return new Promise<boolean>(resolve => {
		returnResponse = resolve;
	});
}
export function Alert(message: string, title: string = "Alert") {
	// pass in type
    Create(message, title, AlertType.ALERT);
}

Which can be implemented as follows:

index.tsx

<Button
    onClick={async () => 
        await Confirm("Are you sure?") 
            ? console.log("TRUE") 
            : console.log("FALSE")
    }
>
    {"Confirm"}
</Button>

In Prod

← Back to Posts

Custom Alert Dialog in React

TL;DR

Alert in React

Append the Component

Adding Data

Closing the Dialog

Extending with Confirm