React MUI Snackbar Feedback

Last Updated : 07 Dec, 2022

React Material UI is an open-source library for the React User Interface components that implement Google’s Material Design. It provides a wide range collection of prebuilt, reusable, responsive components which requires less coding and are ready to use for production implementation. It includes beautifully designed components that can be easily customized according to the user’s needs and requirements.

Snackbar Feedback is a component that is used to provide instant notifications to the user. Snackbar feedback appears temporarily on the user’s screen. They do not have the capabilities to interrupt the ongoing user experience and along with that, they don’t require any event to disappear.

Syntax:

<Snackbar
    open={ }
    autoHideDuration={ }
    onClose={ }
    message=""
    action={ }
    children={ }
/>

Important props available for the Snackbar component:

action: It is used to display the action content after the message content. Its content is rendered to the end of the component.
anchorOrigin: It is used to set the horizontal and vertical alignment of the component.
autoHideDuration: It is used to hide the component automatically. It takes the value as a number of milliseconds.
children: It is used to replace the content of the Snackbar component.
contentProps: It is used to utilize the props on the Snackbar component.
disableWindowBlurListener: It is used to override and expire the timer set by autoHideDuration prop.
key: It is used to uniquely identify the components if we are using multiple snack bar components.
message: It is used to display the message on the component. Its content is rendered at the start of the component.
onClose: It is used to refer to the function called on the closing of the component.
open: It is used to show snackbar component on the screen.

Setting up React.js application:

Step 1: Create a React.js application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e folder name, move into that directory using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material @emotion/react @emotion/styled

npm install @mui/icons-material

Project Structure: The project structure will look like this:

Example 1: In this example, we will use the Snackbar component. We have open and close handlers and we are using “message” and “action” props. We have separately defined the “action” element which has a “close” icon and “achieved” button and we are referring it to the “action” prop in the Snackbar component.

App.js: Write down the below code in the App.js file, where App is our default component provided by React in which code is being written.

Javascript

import React, { useState } from "react"; 
import Button from '@mui/material/Button'; 
import Snackbar from '@mui/material/Snackbar'; 
import IconButton from '@mui/material/IconButton'; 
import CloseIcon from '@mui/icons-material/Close'; 
  
const App = () => { 
    const [showSnackbar, setShowSnackbar] = useState(false); 
  
    const onOpenClickHandler = () => { 
        setShowSnackbar(true); 
    }; 
  
    const onCloseClickHandler = (event) => { 
        setShowSnackbar(false); 
    }; 
  
    const action = ( 
        <> 
            <Button onClick={onCloseClickHandler}> 
                Archived 
            </Button> 
            <IconButton 
                size="small"
                color="inherit"
                onClick={onCloseClickHandler} 
            > 
                <CloseIcon fontSize="small" /> 
            </IconButton> 
        </> 
    ); 
  
    return ( 
        <div> 
            <h1 style={{ color: 'green' }}> 
                GeeksforGeeks 
            </h1> 
            <h2>React MUI Snackbar Feedback</h2> 
            <Button onClick={onOpenClickHandler}> 
                Open simple snackbar 
            </Button> 
            <Snackbar 
                open={showSnackbar} 
                onClose={onCloseClickHandler} 
                message="GeeksforGeeks"
                action={action} 
            /> 
        </div> 
    ); 
}; 
  
export default App;

Step to run the application: To run the application execute the below command from the root directory of the project:

npm start

Output: Your web application will be live on “http://localhost:3000”.Now, you will see the following output:

Example 2: In this example, we have defined our own custom snackbar. We are hiding this snackbar using “autoHideDuration” prop. Along with it we are using the “children” prop to render the “Alert” component inside the Snackbar component.

App.js: Write down the below code in the App.js file, where App is our default component provided by React in which code is being written.

Javascript

import React, { useState } from "react"; 
import Button from '@mui/material/Button'; 
import Snackbar from '@mui/material/Snackbar'; 
import IconButton from '@mui/material/IconButton'; 
import CloseIcon from '@mui/icons-material/Close'; 
import Alert from '@mui/material/Alert'; 
  
const App = () => { 
    const [showSnackbar, setShowSnackbar] = useState(false); 
  
    const onOpenClickHandler = () => { 
        setShowSnackbar(true); 
    }; 
  
    const onCloseClickHandler = (event) => { 
        setShowSnackbar(false); 
    }; 
  
    const CustomSnackbar = (props) => ( 
        <Snackbar 
            autoHideDuration={2000} 
            open={showSnackbar} 
            onClose={onCloseClickHandler} 
            anchorOrigin={{ horizontal: 'center', vertical: 'top' }} 
            children={props.children} 
        > 
        </Snackbar> 
    ); 
  
    return ( 
        <div> 
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1> 
            <h2>React MUI Snackbar Feedback</h2> 
            <Button onClick={onOpenClickHandler}> 
                Click to Open Snackbar 
            </Button> 
            <CustomSnackbar> 
                <Alert severity="success"> 
                    This is a success alert — check it out! 
                </Alert> 
            </CustomSnackbar> 
        </div> 
    ); 
}; 
  
export default App;