React Messages is used to display inline messages with various severities.
Setup
Refer to PrimeReact setup documentation for download and installation steps for your environment.
Import
import { Messages } from 'primereact/messages';
import { Message } from 'primereact/message';
Getting Started
A single message is specified by the Message interface in PrimeReact that defines various properties such as severity, summary and detail. Messages are displayed by using the show method on the ref of the Messages instance.
Note that for animations, messages requires react-transition-group package.
<Messages ref={messages}></Messages>
messages.current.show({severity: 'success', summary: 'Success Message', detail: 'Order submitted'});
Severities
There are four possible values for the severity of a message.
- success
- info
- warn
- error
Showing Messages
Show method accepts either a single message or an array of messages.
<Messages ref={messages}></Messages>
<Button onClick={showSuccess} label="Success" className="p-button-success" />
<Button onClick={showInfo} label="Info" className="p-button-info" />
<Button onClick={showWarn} label="Warn" className="p-button-warning" />
<Button onClick={showError} label="Error" className="p-button-danger" />
<Button onClick={showMultiple} label="Multiple" />
const showSuccess = () => {
messages.current.show({ severity: 'success', summary: 'Success Message', detail: 'Order submitted' });
}
const showInfo = () => {
messages.current.show({ severity: 'info', summary: 'Info Message', detail: 'PrimeReact rocks' });
}
const showWarn = () => {
messages.current.show({ severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes' });
}
const showError = () => {
messages.current.show({ severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
}
const showMultiple = () => {
messages.current.show([
{severity:'info', summary:'Message 1', detail:'PrimeReact rocks'},
{severity:'info', summary:'Message 2', detail:'PrimeReact rocks'},
{severity:'info', summary:'Message 3', detail:'PrimeFaces rocks'}
]);
}
Clearing Messages
clear() method removes all messages.
messages.current.clear();
Replacing Messages
replace(newMessages) method adds new messages after removing all old messages.
messages.current.replace(newMessages);
Closable
Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set closable to false.
messages.current.show({closable: false, severity: 'error', summary: 'Error Message', detail: 'Validation failed'});
Sticky
Messages are cleared automatically after the timeout defined by life property which is 3 seconds by default. Use sticky mode to make them stay until they are manually removed.
//sticky
messages.current.show({ sticky: true, severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
//automatically removed after 5 seconds
messages.current.show({ life: 5000, severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
Message Component
Message component is useful in cases where a single message needs to be displayed related to an element such as forms. It has two properties, severity and text of the message.
<h5>Inline Message CSS</h5>
<p>CSS helpers to display inline messages mostly within forms.</p>
<Message severity="info" text="PrimeNG Rocks"></Message>
<Message severity="success" text="Record Saved"></Message>
<Message severity="warn" text="Are you sure?"></Message>
<Message severity="error" text="Field is required"></Message>
Theming
Messages supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeReact Messages showcase for demos and documentation.