Have you ever seen an app display an alert that action is required, but didn’t give you the relevant link to take the action? Frustrating, isn’t it?
In this demo, we’ll make an alert that has a React Router Link in it:
In the above Alert, the Link is contained in a Button component. However, it’s simple enough to have a Link instead of a Button, and we’ll look at that as well.
Code Sandbox is in the Resources section.
MUI Alert Component with React-Router
In my Codesandbox in the resources section, I have a bit more setup so that the button has a page to navigate to. However, the relevant Alert component code is simply this. Notice how I targeted the .MuiAlert-message class to style the MUI Alert component:
//Styling
const useStyles = makeStyles((theme) =>
createStyles({
root: {
"& .MuiAlert-message": {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
width: "100%"
}
}
})
);
//JSX
<Alert severity="info" className={classes.root}>
<div>This is an info alert</div>
<Button
component={Link}
style={{ margin: 4 }}
to={`/page1`}
variant="contained"
color="primary"
>
Route to Page 1
</Button>
{/*
<Link to="/page1" style={{ padding: 12 }}>
Route To Page 1
</Link>
*/}
</Alert>
The Alert can simply take a component as though it were a div or any other element. The only difficult part is figuring out exactly how to target the proper class for styling.
The docs show that the message rule is available to target, or alternatively you can target the MuiAlert-message class. To target this class, I had to target it as a child of root.
If you want to align the Button differently inside the Alert, consider using the Box component.
If you want to add a simple React Router Link component, you can see the commented out code. It may be better for this situation because users are accustomed to underlined text being a link to another location.
Material-UI Alert Timeout and Collapse
Let’s add close after timeout. The Collapse component adds an easy bit of transition for our Alert.
//hooks
const [open, setOpen] = React.useState(true);
useEffect(() => {
setTimeout(() => {
setOpen(false);
}, 5000);
}, [open]
//JSX
<Collapse in={open}>
<Alert severity="info" className={classes.root}>
{/*...*/}
</Alert>
</Collapse>
A JavaScript setTimeout inside of a useEffect hook gets the job done: update the open state to false.
Material-UI Alert has quite a bit of utility. If you want to see more, take a look at the docs linked below. In particular, take a look at the different variants available. There’s tons of functionality ‘out of the box’.
A similar component is the Popover. It also can contain a link, give users quick, actionable info, and is easily dismissed.
Resources
Here’s another example of React Router with Material-UI: Dynamically Loading Material-UI Icons Using React Router Query Params.
Here’s the complete guide to the MUI Alert component.
Expand your JavaScript knowledge with these 50 difficult JavaScript questions!
Docs:
