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


@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.


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 = () => {{
      severity: "success",
      summary: "Successfully Done",
      detail: "Successfull Content",
      life: 3000,
  const displayError = () => {{
      severity: "error",
      summary: "Error message",
      detail: "Error Content",
      life: 3000,
  const displayInfo = () => {{
      severity: "info",
      summary: "Information summary Done",
      detail: "Information Content",
      life: 3000,
  const displayWaring = () => {{
      severity: "warn",
      summary: "warning Done",
      detail: "warning Content",
      life: 3000,
  return (
      <Toast ref={toast} />
      <Button label="Info" className="p-button-info" onClick={displayInfo} />

export default ToastComponentExample;

And output

React toast/alert notification example


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