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.
Top comments (3)
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?
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...
No, it's terrible, PrimeReact should support ToastContainer and toast instance like react-toastify, which prevent recreate Toast component again and again