How to use Toast component with PrimeREACT 
Tags: javascript, react, primereact, tutorial
Published: 2020-08-28 07:31:14

## Content

* [What is PrimeREACT?](#section-1)
* [Requirements](#section-2)
* [How to start](#section-3)
* [The Toast component](#section-4)
* [Implementation](#section-5)
* [Closing Thoughts](#section-7)
* [References](#section-8)


# What is PrimeREACT?<a name="section-1"></a>

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<a name="section-2"></a>

For this example I am using:
* Node v12.18.2
* Npm v6.14.5
* PrimeReact 5.0.0

# The Toast component<a name="section-4"></a>

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](https://i.postimg.cc/rFRfxMTF/toast.png)](https://postimg.cc/5615McjZ)

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<a name="section-3"></a>

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:

```console 
npm install primereact --save
```

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

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

# Implementation<a name="section-5"></a>
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.):


```react
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.

```react
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](https://reactjs.org/docs/refs-and-the-dom.html) and initialize it with the value null

```react
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

```react
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. 

```react
  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.
```react
<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.

```react
<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](https://i.postimg.cc/BbrSxcdM/toast-msg.png)](https://postimg.cc/0KC1vm5w)

Here the complete code:

```react
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<a name="section-7"></a>

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<a name="section-8"></a>
[PrimeREACT Website](https://www.primefaces.org/primereact/)
[Toast component documentation](https://primefaces.org/primereact/showcase/#/toast)
[REACT refs](https://reactjs.org/docs/refs-and-the-dom.html)