React alert notification example| primereact toast tutorials


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

PrimeReact is an opensource react component library provides reusable components for 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 an react application using create-react-app tool

#create-react-app command creates new applications with all files and build pipelines. It provides all latest reactjs and its dependencies.

npx create-react-app primereact-toast

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

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

npm run start

Add primereact npm library to react application

We have to install below dependencies using 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 icon library provided by primereact company. you can see more about primeicons

react-transition-group is a 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";

First file is theme file which 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 alert notification component with primereact

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

These component is created as 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 Message object in PrimeReact,
Message object has following properties

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

Message object has 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 an toast container

toastObject is to be attached to ToastContainer using ref which have to declared in typescript code. position- show notification in 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 installed react-transition-group in react application, It gives Module not found: Can’t resolve react-transition-group an error in browser.

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

npm install react-transition-group --save
Similar Posts