DEV Community

Cover image for How to use Toast component with PrimeREACT
HectorSM
HectorSM

Posted on

How to use Toast component with PrimeREACT

Content

What is PrimeREACT?

PrimeREACT is an open-source UI Library for REACT with native components created by PrimeTek. The support is provided by the company as well as for the community users.

The Prime library is also available for JSF, Angular and Vue.

Requirements

For this example I am using:

  • Node v12.18.2
  • Npm v6.14.5
  • PrimeReact 5.0.0

The Toast component

The Toast component is used to display messages in an overlay and has the capacity to customize the messages easily using its properties, this component was added in the version 5.0.0 of PrimeREACT (aka Growl in previous versions).

toast.png

The toast component is formed by three main attributes (there are more):

severity

There are four possible values for the severity of a message.

success
info
warn
error

summary

Summary content of the message.

detail

Detail content of the message.

How to start

You can create a new REACT project or use any project you are working at.

Once we have our project ready, we need to install the PrimeReact module available at npm using the following command:

npm install primereact --save

as well the modules react-transition-group package for animations, classnames package to manage style classes and primeicons.

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

Implementation

For this example, I will be using the App.js file which is created by default. The boilerplate code looks like this (NOTE: This is a function component.):

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Toast Example</h1>      
    </div>
  );
}

export default App;

Let's start to code!

1 We need to import the Toast component in our file, and the styles if we want to use the Prime themes.
NOTE: You can use your own css file.

import { Toast } from 'primereact/toast';
import 'primereact/resources/themes/saga-green/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';

2 Inside the app component create a ref using the hook useRef and initialize it with the value null

const myToast = useRef(null);

Do not forget to add the import of the ref hook from React. The imports from React now look like this

import React, {useRef} from 'react';

3 Let's create a function call showToast with three parameters corresponding to the parts of the Toast component: severity, summary and detail. These parameters will help us to make dynamic the content of the toast.

  const showToast = (severityValue, summaryValue, detailValue) => {   
    myToast.current.show({severity: severityValue, summary: summaryValue, detail: detailValue});   
  }

4 Afterwards, we add the toast component to the return block of the App component using the ref created before.

<Toast ref={myToast} /> 

5 Finally, we create a button to trigger the function showToast passing the three parameters. You can use any other element to call the function.

<button onClick={() => showToast('success','Success Message','The task was executed successfully.')}>Show message</button>

The final result looks like the following image when you click the button.

toast-msg.png

Here the complete code:

import React, {useRef} from 'react';
import './App.css';
import { Toast } from 'primereact/toast';
import 'primereact/resources/themes/saga-green/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';

function App() {

  const myToast = useRef(null);

  const showToast = (severityValue, summaryValue, detailValue) => {   
    myToast.current.show({severity: severityValue, summary: summaryValue, detail: detailValue});   
  }

  return (
    <div className="App">
      <h1>Toast Example</h1>    
      <Toast ref={myToast} /> 
      <button onClick={() => showToast('success','Success Message','The task was executed successfully.')}>Show message</button>
    </div>
  );
}

export default App;

Or you can clone the project from GitHub https://github.com/ZhectorSM/toast-article.git

Closing Thoughts

This is the first public article I have written in life, hoping to be helpful and enjoyable. If you find any problems with the example provided feel free to reach out to me.
Thank you for reading.

References

PrimeREACT Website
Toast component documentation
REACT refs

Top comments (3)

Collapse
 
nvgrae profile image
nvg-rae

Great post Hector, thank you for putting it together. Do you know how to make a global toast by any chance? For example, if you have separate routes and need to show a "success" message on return from a child component?

Collapse
 
zhectorsm profile image
HectorSM • Edited

Thank you for your comment.
You can add the toast in the very parent component, then pass the function as a prop to the children components.
Here an example. I hope it helps github.com/ZhectorSM/basic-crud-re...

Collapse
 
quoctienkt profile image
Tien Dang

No, it's terrible, PrimeReact should support ToastContainer and toast instance like react-toastify, which prevent recreate Toast component again and again