Open In App

React Suite Message With toaster

Improve
Improve
Like Article
Like
Save
Share
Report

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The message component allows the user to show important tips on the page. 

Message with Toaster creates a message type that contains an Alert.

Syntax:

const toaster = useToaster();
toaster.push(<Message>Some Message</Message>)

Creating React Application And Installing Module:

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

npx create-react-app foldername

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

cd foldername

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

npm install rsuite

Project Structure: It will look like the following:

 

Example 1: Now write down the following code in the App.js file. Here, App is our default component where we have written our code. In this example, we will display a success message at topEnd using a toaster.

Javascript




import React from 'react'
import Button from 'rsuite/Button';
import 'rsuite/dist/rsuite.min.css';
import { Message } from 'rsuite'
import { useToaster } from 'rsuite/toaster';
  
export default function App() {
    const toaster = useToaster();
    return (
        <div >
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h3>React Suite Message With Toaster</h3>
            <Button onClick={() => toaster.push(
                <Message showIcon type="success">
                    Hi ! Welcome to GeeksforGeeks.
                </Message>, { placement: 'topEnd' })}>
                Push
            </Button>
        </div>
    );
}


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

 

Example 2: In this example, we have shown, how can you trigger an event by closing a Message Toaster.

Javascript




import React from 'react'
import Button from 'rsuite/Button';
import 'rsuite/dist/rsuite.min.css';
import { Message } from 'rsuite'
import { useToaster } from 'rsuite/toaster';
  
export default function App() {
    const toaster = useToaster();
    return (
        <div >
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h3>React Suite Message With Toaster</h3>
  
            <Button onClick={() => toaster.push(
            <Message showIcon type="error" closable
                onClose={() => alert("Hi GFG")}>
                Hi ! Welcome to GeeksforGeeks.
            </Message>, { placement: 'topEnd' })}>
                Push
            </Button>
        </div>
    );
}


Output:

 

Reference: https://rsuitejs.com/components/message/#with-toaster



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