React Tutorial- React Material UI Alert Box Component Exmples

React Material UI Alert Box Example;

In this React tutorial, we will learn how to create a user-friendly alert box component in a React Js app. We will do it with the help of React Material UI Library in a function component from scratch.

 

An alert box is quite useful in UI. It is a type of dialogue box used to display in a graphical user interface when something unanticipated happens that needs prompt user action.

 

How To Create Alert Box Component In React With Material UI

Step 1- Build A New Project

Most of us already know that the basic step is just to create a new React project by using the below command:

npx create-react-app react-blog-app

Now, we enter into the project after the app is installed:

cd react-blog-app

 

Step 2- Install React Material UI Package

In this second step, we will install React Material UI using the below-given command:

npm i @mui/material @emotion/react @emotion/styled @fontsource/roboto

React MUI is installed and it will be ready to create flawless UI components. We also have to add the given fonts and CSS in the App.css file:

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
@import "@fontsource/roboto/300.css";
@import "@fontsource/roboto/400.css";
@import "@fontsource/roboto/500.css";
@import "@fontsource/roboto/700.css";

 

Step 3- Create Function Class

Now, we are going to take the function component approach. So, we will create the components/ folder inside the src directory. Also, we will make the AlertBox.js file with the below code:

import React from 'react'
function AlertBox() {
  return (
    <div>ToggleSwitch</div>
  )
}
export default AlertBox

 

Step 4- Create Alert Box In React

Here, inside the function, we will import the Alert and Stack modules and define the alert component in return methods.

The Alert Box comes with four severity grades that set a unique icon and color.

Further, we will add the given code in the components/AlertBox.js file:

import * as React from "react";
import Alert from "@mui/material/Alert";
import Stack from "@mui/material/Stack";
export default function AlertBox() {
  return (
    <Stack sx={{ width: "100%" }} spacing={2}>
      <Alert severity="error">This is an error alert — check it out!</Alert>
      <Alert severity="warning">This is a warning alert — check it out!</Alert>
      <Alert severity="info">This is an info alert — check it out!</Alert>
      <Alert severity="success">This is a success alert — check it out!</Alert>
    </Stack>
  );
}

 

Step 5- Alert Box With Description

We have to add the AlertTitle component to show a formatted title above the content:

import * as React from 'react';
import Alert from '@mui/material/Alert';
import AlertTitle from '@mui/material/AlertTitle';
import Stack from '@mui/material/Stack';
export default function AlertBox() {
  return (
    <Stack sx={{ width: '100%' }} spacing={2}>
      <Alert severity="error">
        <AlertTitle>Error</AlertTitle>
        This is an error alert — <strong>check it out!</strong>
      </Alert>
      <Alert severity="warning">
        <AlertTitle>Warning</AlertTitle>
        This is a warning alert — <strong>check it out!</strong>
      </Alert>
      <Alert severity="info">
        <AlertTitle>Info</AlertTitle>
        This is an info alert — <strong>check it out!</strong>
      </Alert>
      <Alert severity="success">
        <AlertTitle>Success</AlertTitle>
        This is a success alert — <strong>check it out!</strong>
      </Alert>
    </Stack>
  );
}

 

Step 6- Alert Box With Close And Undo Button

We usually want to hide the alert after showing the message to users. We seldom programmatically hide the alert box or we can add the close button in the alert.

An alert might have an action like a close or undo button. It manifests after the message or the end of the alert:

import * as React from 'react';
import Alert from '@mui/material/Alert';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
export default function AlertBox() {
  return (
    <Stack sx={{ width: '100%' }} spacing={2}>
      <Alert onClose={() => {}}>This is a success alert — check it out!</Alert>
      <Alert
        action={
          <Button color="inherit" size="small">
            UNDO
          </Button>
        }
      >
        This is a success alert — check it out!
      </Alert>
    </Stack>
  );
}

 

Step 7- Add An Icon In Alert Box

Alert comes with custom props that help us make the icon-adding process facile. The icon prop permits us to set an icon at the beginning of the Alert component:

import * as React from 'react';
import Alert from '@mui/material/Alert';
import CheckIcon from '@mui/icons-material/Check';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import Stack from '@mui/material/Stack';
export default function AlertBox() {
  return (
    <Stack sx={{ width: '100%' }} spacing={2}>
      <Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
        This is a success alert — check it out!
      </Alert>
      <Alert
        iconMapping={{
          success: <CheckCircleOutlineIcon fontSize="inherit" />,
        }}
      >
        This is a success alert — check it out!
      </Alert>
      <Alert icon={false} severity="success">
        This is a success alert — check it out!
      </Alert>
    </Stack>
  );
}

 

Step 8- Register Component In The App Js

We have successfully created the Switch Button component. It will not show on the browser unless we inject it inside the App.js main component file:

import React from "react";
import AlertBox from "./components/AlertBox";
function App() {
  return (
    <div>
      <h2>React Material UI Custom Alert Box Example</h2>
      <AlertBox />
    </div>
  );
}
export default App;

 

Step 9- Start The Reat App

Since our React app is ready, it is now time for us to serve the React project using the below command:

npm start

 

Conclusion

In this tutorial, we have learned how to implement an alert bo in a React functional component. We installed and used React Material UI for the purpose.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *