Skip to content
Related Articles

Related Articles

React Suite Notification toaster.push Method

View Discussion
Improve Article
Save Article
  • Last Updated : 14 Jul, 2022
View Discussion
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 Notification toaster.push() method. This method is basically used to push message notifications.

Notification Props:

  • children: It gives the description of the message box.
  • closable: It is used to add a remove button.
  • duration: It is used to delay automatic closing notification, only effective when used in combination with a toaster.
  • header: It is used to denote the title of the message box.
  • onClose: It is a callback function that is called on the close of the Notification box.
  • placement: It is used for the placement of the message box.
  • type: It is used to denote the type of the message box.

Toaster Methods:

  • toaster.push(): This method is used to push a message.
  • toaster.remove(): This method is used to remove a message by key.
  • toaster.clear(): This method is used to clear all messages.

Syntax:

<Notification type={'info'} header={'Info'} closable>
    ....
</Notification>

<Button onClick={
    () => toaster.push(
        'Message', { placement: 'topStart' }
    )
}>
    ...
</Button>

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 basic notification push method with the toaster component.

Javascript




import { Button, Notification, useToaster } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
  
    const toaster = useToaster();
    const message = (
        <Notification type={'info'} header={'Info'} closable>
            <h4>You pushed a message notification.</h4>
        </Notification>
    );
  
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Notification toaster.push Method
                </h4>
                <div style={{ marginTop: 20, width: 400 }}>
                    <Button onClick={
                        () => toaster.push(
                            message, { placement: 'topStart' }
                        )}>Push</Button>
                </div>
            </div>
        </center>
    );
}

Output:

 

Example 2: Below example demonstrates the notification push method with the toaster and uploader component.

Javascript




import { Button, Notification, Uploader, 
    useToaster } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
  
    const toaster = useToaster();
    const message = (
        <Notification type={'success'
            header={'Upload'} closable>
            <p>Upload your profile picture.</p>
            <br />
            <Uploader />
        </Notification>
    );
  
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Notification toaster.push Method
                </h4>
                <div style={{ marginTop: 20, width: 400 }}>
                    <Button onClick={
                        () => toaster.push(
                            message, { placement: 'bottomCenter' }
                        )}>Click</Button>
                </div>
            </div>
        </center>
    );
}

Output:

 

Reference: https://rsuitejs.com/components/notification/#toaster-push


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!