Content

• What is PrimeREACT?
• Requirements
• How to start
• The Toast component
• Implementation
• Closing Thoughts
• References

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

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.

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