React Suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.
In this article, we’ll learn about React Suite Message Props & Methods. A message component is used to show important tips on a page.
Message Props:
- children: It provides the description information for the message.
- classPrefix: It is used to denote the prefix of the component CSS class.
- closable: It gives whether to close the message box.
- full: It fills the message container.
- header: It provides the title of the message.
- onClose: It is called after the message is closed.
- showIcon: It is used whether to display an icon or not.
- type: It displays the type of message box. Four types include info, warning, error, and success.
useToaster Method (Hook): The useToaster is a react hook or method used for creating and managing the toasters in web applications.
- toaster.push(): It is used to push a message and return a unique key.
- toaster.remove(): It is used to remove a message by a key.
- toaster.clear(): It is used to close all messages.
Syntax:
import { Message } from "rsuite";
Function App() {
return (
<Message closable type="warning" >
...
</Message>
);
}
Creating React Application And Installing Module:
Step 1: Create a React application using the given command:
npm create-react-app projectname
Step 2: After creating your project, move to it using the given command:
cd projectname
Step 3: Now Install the rsuite node package using the given command:
npm install rsuite
Project Structure: Now your project structure should look like the following:
Example 1: Below example demonstrates the useToaster.push method of Message Prop.
Javascript
import { Button, Message, useToaster } from "rsuite"; import "rsuite/dist/rsuite.min.css"; export default function App() { const toaster = useToaster(); const message = ( <Message showIcon type={'success'}> Hey Geek! Welcome to neveropen. </Message> ); return ( <center> <div> <h2>neveropen</h2> <h4 style={{ color: "green" }}> React Suite Message Props and Methods </h4> <div style={{ marginTop: 20, width: 400 }}> <Button onClick={() => toaster.push(message)}> Push </Button> </div> </div> </center> ); } |
Output:
Example 2: Below example demonstrates the useToaster.remove method of Message Prop.
Javascript
import { Button, Message, useToaster } from "rsuite"; import "rsuite/dist/rsuite.min.css"; export default function App() { const toaster = useToaster(); const message = ( <Message showIcon type={'success'}> Hey Geek! Welcome to neveropen. </Message> ); return ( <center> <div> <h2>neveropen</h2> <h4 style={{ color: "green" }}> React Suite Message Props and Methods </h4> <div style={{ marginTop: 20, width: 400 }}> <Button onClick={() => toaster.push( message, { placement: 'topEnd' } )}> Push </Button> <Button onClick={() => toaster.remove()}> Remove </Button> </div> </div> </center> ); } |
Output:
Example 3: Below example demonstrates the useToaster.clear method of Message Prop.
Javascript
import { Button, Message, useToaster } from "rsuite"; import "rsuite/dist/rsuite.min.css"; export default function App() { const toaster = useToaster(); const message = ( <Message showIcon type={'info'}> You have been successfully logged in. </Message> ); return ( <center> <div> <h2>neveropen</h2> <h4 style={{ color: "green" }}> React Suite Message Props and Methods </h4> <div style={{ marginTop: 20, width: 400 }}> <Button onClick={() => toaster.push( message, { placement: 'bottomCenter' } )}> Push </Button> <Button onClick={() => toaster.clear()}> Clear </Button> </div> </div> </center> ); } |
Output:
Reference: https://rsuitejs.com/components/message/#props-amp-hooks
