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' }}> neveropen </h1> <h3>React Suite Message With Toaster</h3> <Button onClick={() => toaster.push( <Message showIcon type="success"> Hi ! Welcome to neveropen. </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' }}> neveropen </h1> <h3>React Suite Message With Toaster</h3> <Button onClick={() => toaster.push( <Message showIcon type="error" closable onClose={() => alert("Hi GFG")}> Hi ! Welcome to neveropen. </Message>, { placement: 'topEnd' })}> Push </Button> </div> ); } |
Output:
Reference: https://rsuitejs.com/components/message/#with-toaster
