Implement React-Suite Toast Notification In React-JS

Hello Developers, In this blog we will learn how we can use toast notification for message in our react app

First create new app using following command

npx create-react-app

First of all install neccessary packages into your app

npm i rsuite

Then import all important files in your app js file

import { Message, useToaster } from 'rsuite';
import 'rsuite/dist/rsuite.min.css';

Now, to show toast notification we have to use useToaster hook

Just like this

const toaster = useToaster()

Now you can show toast with this toaster

use toaster.push(YOUR_ELEMENT) to display toast message

<Button onClick={() =>
 toaster.push(
   <Message showIcon type="success" header='Success' closable>
     Success Toast Message Example
   </Message>, { placement: 'topEnd' }
 )}>Success</Button>

There are 4 types of variants are available for toast message

<Button onClick={() =>
  toaster.push(
    <Message showIcon type="success" header='Success' closable>
      Success Toast Message Example
    </Message>, { placement: 'topEnd' }
  )}>Success</Button>
<Button onClick={() =>
  toaster.push(
    <Message showIcon type="info" header='Informational' closable>
      Informational Toast Message Example
    </Message>, { placement: 'bottomCenter' }
  )}>Info</Button>
<Button onClick={() =>
  toaster.push(
    <Message showIcon type="warning" header='Warning' closable>
      Warning Toast Message Example
    </Message>, { placement: 'topEnd' })
}>Warning</Button>
<Button onClick={() =>
  toaster.push(
    <Message showIcon type="error" header='Error' closable>
      Error Toast Message Example
    </Message>, { placement: 'topEnd' })
}>Error</Button>

Demo:

You can use toaster.remove() method to remove toast and toaster.clear() method to clear all toasts