How to Create a Toast Notification with Prime React code examples

Toast or alert notification UI is a basic element in Web pages to display the status of an operation to a user. Status is info, warning, success, or error. this tutorial, explains how to show alert or toast messages in React application.

PrimeReact is an open-source react component library that contains set of React UI components. It is a collection of robust, easy to use and well documented React Components for building modern web applications. In this tutorial, learn how to implement toast/alert notifications message shown to users in React Application using primereact library

Let’s get started!

#Create a new react application

First, Let’s create a react application using the create-react-app tool

create-react-app command creates new applications with all files and builds pipelines. It provides all the latest reactjs and their dependencies

npx create-react-app primereact-toast

This creates a primereact-toast application and installs required dependencies automatically.

go to the application root folder, and start the application by running the below command.

npm run start

#Add primereact npm library to react application

We have to install the below dependencies using the npm install command

npm install primereact --save
npm install primeicons --save
npm install react-transition-group --save

primereact is React component UI library which has a dependency on primeicons.

primeicons is an icon library provided by primereact company. you can see more about primeicons🔗

react-transition-group is an npm library required for animation support

Once installed, you can see below entries added to package.json

  "dependencies": {
    "primeicons": "^4.1.0",
    "primereact": "^6.0.0",
  },

#add primereact theme and styles to react application

Primereact provides the following CSS files, add those files in App.css

App.css

@import "~primereact/resources/themes/saga-green/theme.css";
@import "~primereact/resources/primereact.min.css";
@import "~primeicons/primeicons.css";

The first file is a theme file that you can change to other themes. primereact CSS is minified file primereact components. primeicons is to include prime icons in reactjs application

#how to create an alert notification component with primereact

Let’s first create a React component called ToastComponentExample.js

This component is created as a Stateless or functional component.

ToastComponentExample.js:

import React from "react";

const ToastComponentExample = () => {
  return <div></div>;
};

export default ToastComponentExample;

Next, Import Toast component into this component.

import { Toast } from "primereact/toast";

alert notification is represented in as a Message object in PrimeReact, Message object has the following properties

• severity - a type of notification with different colors and styles success - error - info - warning -
• summary - It is a title of a notification
• detail - a body of the notifications

Message object has the following methods to show and hide the notifications

• show() - displays the notification
• clear() - remove the notification object from current scope

Let’s use in react component.

Add toast container as below

<Toast ref="{toastObject}" position="top-left" className="cssclassname"></Toast>

Here is Toast is a toast container

toastObject is to be attached to ToastContainer using ref which has to declare in typescript code. position- show notification in the position of the page Valid values are top-right,top-left,bottom-left,bottom-right

Complete code :

import React, { useRef } from "react";
import { Toast } from "primereact/toast";
import { Button } from "primereact/button";
import "../index.css";
const ToastComponentExample = () => {
  const toast = useRef(null);
  const displaySuccess = () => {
    toast.current.show({
      severity: "success",
      summary: "Successfully Done",
      detail: "Successfull Content",
      life: 3000,
    });
  };
  const displayError = () => {
    toast.current.show({
      severity: "error",
      summary: "Error message",
      detail: "Error Content",
      life: 3000,
    });
  };
  const displayInfo = () => {
    toast.current.show({
      severity: "info",
      summary: "Information summary Done",
      detail: "Information Content",
      life: 3000,
    });
  };
  const displayWaring = () => {
    toast.current.show({
      severity: "warn",
      summary: "warning Done",
      detail: "warning Content",
      life: 3000,
    });
  };
  return (
    <div>
      <Toast ref={toast} />
      <Button
        label="Success"
        className="p-button-success"
        onClick={displaySuccess}
      />
      <Button label="Info" className="p-button-info" onClick={displayInfo} />
      <Button
        label="Warn"
        className="p-button-warning"
        onClick={displayWaring}
      />
      <Button
        label="Error"
        className="p-button-danger"
        onClick={displayError}
      />
    </div>
  );
};

export default ToastComponentExample;

And output

#error

if you don’t install react-transition-group in react application, It gives Module not found: Can’t resolve react-transition-group a browser error.

Some of Primereact’s components like toast dependents on the animation library react-transition-group, so you have to install using npm to fix it.

npm install react-transition-group --save