Skip to content
Related Articles
Open in App
Not now

Related Articles

React Suite Message Props & Methods

Improve Article
Save Article
  • Last Updated : 27 Jul, 2022
Improve Article
Save Article

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 GeeksforGeeks.
        </Message>
    );
  
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</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 GeeksforGeeks.
        </Message>
    );
  
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</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>GeeksforGeeks</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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!