{

React alert notification example| primereact toast tutorials


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 provides reusable components for the reactjs framework. 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

React toast/alert notification example

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
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.