React Suite Message Props & Methods

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