React Suite Message With toaster
Last Updated :
22 Jun, 2022
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
Share your thoughts in the comments
Please Login to comment...