DEV Community

loading...
Cover image for React Toast

React Toast

primetek profile image PrimeTek ・2 min read

React Toast is used to display messages in an overlay.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { Toast } from 'primereact/toast';
Enter fullscreen mode Exit fullscreen mode

Getting Started

A single message is represented 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 Toast instance.

Note that for animations, toast requires react-transition-group package.

<Toast ref={toast} />
Enter fullscreen mode Exit fullscreen mode
toast.current.show({severity: 'success', summary: 'Success Message', detail: 'Order submitted'});
Enter fullscreen mode Exit fullscreen mode

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.

<Toast ref={toast}></Toast>

<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" />
Enter fullscreen mode Exit fullscreen mode
showSuccess() {
    toast.current.show({severity: 'success', summary: 'Success Message', detail: 'Order submitted'});
}

showInfo() {
    toast.current.show({severity: 'info', summary: 'Info Message', detail: 'PrimeReact rocks'});
}

showWarn() {
    toast.current.show({severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes'});
}

showError() {
    toast.current.show({severity: 'error', summary: 'Error Message', detail: 'Validation failed'});
}

showMultiple() {
    toast.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'}
    ]);
}
Enter fullscreen mode Exit fullscreen mode

Closable

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

toast.current.show({closable: false, severity: 'error', summary: 'Error Message', detail: 'Validation failed'});
Enter fullscreen mode Exit fullscreen mode

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
toast.current.show({sticky: true, severity: 'error', summary: 'Error Message', detail: 'Validation failed'});

//automatically removed after 5 seconds
toast.current.show({life: 5000, severity: 'error', summary: 'Error Message', detail: 'Validation failed'});
Enter fullscreen mode Exit fullscreen mode

Position

There are four positions available for the toast container defined by the position property that defaults to "top-right". Other valid values are "top-left", "bottom-left" and "bottom-right"

<Toast ref={toast} position="top-left"></Toast>
Enter fullscreen mode Exit fullscreen mode

Clearing Messages

clear() method removes all messages from Toast.

    toast.current.clear();
Enter fullscreen mode Exit fullscreen mode

Theming

Toast supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact Toast showcase for demos and documentation.

Discussion (0)

pic
Editor guide