Open In App

React Suite Notification Message Type

Improve
Improve
Like Article
Like
Save
Share
Report

React Suite is a front-end library designed for the middle platform and back-end products. 

React Suite Notification components show notification messages on the screen.

The type prop takes a string as value and defines the way the notification will appear, which includes icons of different colors, and message background color. The four values are ‘success’, ‘error’, ‘warning’ and ‘info’ which is described by ‘green’, ‘red’, ‘yellow’ and ‘blue’ color respectively.

Syntax:

<Notification type=""></Notification>

Prerequisite:

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t then install create-react-app globally by using the command npm -g create-react-app or can install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3: Now install the dependency by using the following command:

npm install rsuite

Project Structure: It will look like this:

 

Example 1: In this example, we are importing the  Message and Notification Component from “rsuite”, and applying the default styles of the components we are importing “rsuite/dist/rsuite.min.css”. 

We are creating three states using react hook useState naming typeText, message, and buttonText with initial values such as ‘info’, ‘Login to Begin !’ and ‘login’ respectively.

We are passing the typeText to the type prop of both the Notification and the Message component.Within the <h4> tags we are passing the message state. To the button label we are adding the buttonText, we are also adding an onClick function naming handleClick changes the states.

  • App.js: Write the below code in the app.js file:

App.js




import { useState } from "react";
import { Message, Notification } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
    const [typeText, setTypeText] = useState("info");
    const [message, setMessage] = useState("Login to Begin !");
    const [buttonText, setButtonText] = useState("login");
  
    const handleClick = () => {
        setTypeText("error");
        setMessage("Something went wrong! Try again");
        setButtonText("Retry");
    };
    return (
        <div className="App">
            <h4>React Suite Notification Message type</h4>
            <Notification type={typeText} header="Hey Geek!">
                <Message type={typeText}>
                    <h4>{message}</h4>
  
                    <button
                        onClick={handleClick}
                        style={{ boxShadow: "-2px 3px 5px 0px" }}
                    >
                        {buttonText}
                    </button>
                </Message>
            </Notification>
        </div>
    );
}
  
export default App;


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

 

Example 2: In this example, we are importing the  Message and Notification Component from “rsuite”, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”. 

We are passing different values to the type prop of both the Message and Notification component. We are also passing the same value to the header prop of the Notification component.

App.js: Write the below code in the app.js file:

App.js




import { Message, Notification } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
    return (
        <div className="App">
            <h4>React Suite Notification Message type</h4>
            <Notification type="success" header="Success">
                <Message type="success">Success Message</Message>
            </Notification>
            <Notification type="warning" header="Warning">
                <Message type="warning">Warning Message</Message>
            </Notification>
            <Notification type="info" header="Info">
                <Message type="info">Info Message</Message>
            </Notification>
            <Notification type="error" header="Error">
                <Message type="error">Error Message</Message>
            </Notification>
        </div>
    );
}
  
export default App;


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

 

Reference: https://rsuitejs.com/components/notification/#message-type



Last Updated : 03 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads