React Toast - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your Angular, Vue, React, or jQuery application.

Toast is a UI component that displays pop-up notifications.

This tutorial shows how to add the Toast component to your application and configure its core features.

Each section in this tutorial describes a single configuration step. You can also find the full code in the following GitHub repository: getting-started-with-toast.

Display a Toast notification

NOTE
This tutorial displays a Toast notification in response to a click on a Button. However, you can re-use the code for different application logic.

Use the 'notify' Method

Call the notify method to display a Toast. This method can accept two different sets of arguments.

A basic syntax is notify(message, type, displayTime). You specify the message, type, and displayTime.

To specify additional Toast properties, call the notify(options, type, displayTime) method and pass an object as the first argument. The example below uses this syntax.

You can specify one of the four predefined types of notifications, depending on the message:

  • 'info'
    A blue toast with a message bubble icon.

  • 'warning'
    A yellow toast with an exclamation mark icon.

  • 'error'
    A red toast with an X icon.

  • 'success'
    A green toast with a check mark icon.

If you call the method that allows additional options, you can set the width, height position, and other options. The configuration of the position property in the example below reads as follows: "place my bottom side at the bottom side of the "#container".

jQuery
index.js
index.html
index.css
$(function() {
    const types = ['error', 'info', 'success', 'warning'];

    $("#show-message").dxButton({
        text: "Show message",
        onClick: function() {
            DevExpress.ui.notify(
                {
                    message: "You have a new message", 
                    width: 230,
                    position: {
                        my: "bottom",
                        at: "bottom",
                        of: "#container"
                    }
                }, 
                types[Math.floor(Math.random() * 4)], 
                500
            );
        },
    });

});
<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/21.1.11/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/21.1.11/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <div id="container">
            <div id="buttons">
                <div id="show-message"></div>
            </div>
        </div>
    </body>
</html>
#container {
    width: 300px;
    height: 120px;
    margin: 5px;
}

#buttons {
    display: flex;
}
Angular
app.component.html
app.component.ts
app.module.ts
app.component.css
<div id="container">
    <div id="buttons">
        <dx-button
            text="Show message"
            (onClick)="showMessage()"
        >
        </dx-button>
    </div>
</div>
import { Component } from '@angular/core';
import notify from 'devextreme/ui/notify';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    types = ['error', 'info', 'success', 'warning'];
    showMessage() {
        notify(
            {
                message: "You have a new message", 
                width: 230,
                position: {
                    at: "bottom",
                    my: "bottom",
                    of: "#container"
                }
            }, 
            this.types[Math.floor(Math.random() * 4)], 
            500
        );
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxButtonModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxButtonModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
#container {
    width: 300px;
    height: 120px;
    margin: 5px;
}

#buttons {
    display: flex;
}
Vue
App.vue
<template>
    <div id="container">
        <div id="buttons">
            <dxButton
                text="Show message"
                @click="showMessage"
            >
            </dxButton>
        </div>
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import { DxButton } from 'devextreme-vue/button';
import notify from "devextreme/ui/notify";

export default {
    components: {
        DxButton
    }
    data() {
        return {
            types: ['error', 'info', 'success', 'warning']
        };
    },
    methods: {    
        showMessage() {
            notify(
                {
                    message: "You have a new message", 
                    width: 230,
                    position: {
                        at: "bottom",
                        my: "bottom",
                        of: "#container"
                    }
                }, 
                this.types[Math.floor(Math.random() * 4)], 
                500
            );
        }
    }
}
</script>

<style>
    #container {
        width: 300px;
        height: 120px;
        margin: 5px;
    }

    #buttons {
        display: flex;
    }
</style>
React
App.js
index.css
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Button } from 'devextreme-react/button';
import notify from 'devextreme/ui/notify';

const types = ['error', 'info', 'success', 'warning'];

const showMessage = () => {
    notify(
        {
            message: "You have a new message", 
            width: 230,
            position: {
                at: "bottom",
                my: "bottom",
                of: "#container"
            }
        }, 
        types[Math.floor(Math.random() * 4)], 
        500
    );
}

function App() {
    return (
        <div id="container">
            <div id="buttons">
                <Button
                    text="Show message"
                    onClick={showMessage}
                >
                </Button>
            </div>
        </div>
    );
}

export default App;
#container {
    width: 300px;
    height: 120px;
    margin: 5px;
}

#buttons {
    display: flex;
}

Show and Hide the Toast

When you need to show a notification in Angular, Vue, or React, you can use one of the notify methods described in the section above. If you want, for example, to customize Toast content, bind the visible property of the Toast component to a component (Button in the example) property. After that, you can change this property to show or hide the Toast notification.

The example below shows how you can show and hide the Toast component without the content customization. To learn how to customize Toast content, refer to the section below.

Angular
app.component.html
app.component.ts
app.module.ts
<div id="container">
    <div id="buttons">
        <!-- ... -->
        <dx-button
            text="Show custom message"
            (onClick)="showCustomMessage()"
        >
        </dx-button>
        <dx-toast
            [(visible)]="isVisible"
            type="info"
            message="You have a new message"
        >  
            <dxo-position
                my="bottom"
                at="bottom"
                of="#container">
            </dxo-position>
        </dx-toast>
    </div>
</div>
import { Component } from '@angular/core';
import notify from 'devextreme/ui/notify';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
    isVisible: boolean = false;
    showCustomMessage() {
        this.isVisible = true;
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxButtonModule, DxToastModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxButtonModule,
        DxToastModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <div id="container">
        <div id="buttons">
            <!-- ... -->
            <dxButton
                text="Show custom message"
                @click="showCustomMessage"
            >
            </dxButton>
        </div>
        <dxToast
            v-model:visible="isVisible"
            type="info"
            message="You have a new message"    
        >   
            <DxPosition
                my="bottom"
                at="bottom"
                of="#container"
            />
        </dxToast>
        </div>
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import { DxButton } from 'devextreme-vue/button';
import { DxToast, DxPosition } from 'devextreme-vue/toast';
import notify from "devextreme/ui/notify";

export default {
    components: {
        DxButton,
        DxToast,
        DxPosition
    }
    data() {
        return {
            // ...
            isVisible: false
        };
    },
    methods: {    
        // ...
        showCustomMessage() {
            this.isVisible = true;
        }
    }
}
</script>

<style>
    /*  */
</style>
React
App.js
import React, { useState } from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Button } from 'devextreme-react/button';
import { Toast, Position } from 'devextreme-react/toast';
import notify from 'devextreme/ui/notify';

function App() {
    const [isVisible, setIsVisible] = useState(false);
    const showCustomMessage = () => {
        setIsVisible(true);
    }
    const onHiding = () => {
        setIsVisible(false);
    }
    return (
        <div id="container">
            <div id="buttons">
                <!-- ... -->
                <Button
                    text="Show custom message"
                    onClick={showCustomMessage}
                >
                </Button>
            </div>
            <Toast
                visible={isVisible}
                type="info"
                message="You have a new message"
                onHiding={onHiding}    
            >   
                <Position
                    my="bottom"
                    at="bottom"
                    of="#container"
                />
            </Toast>
        </div>
    );
}

export default App;

Customize Toast Content

To customize toast content, either specify a contentTemplate function or a custom template inside a component. Use .dx-toast-custom CSS class for the template and set the type property to custom.

jQuery
index.js
index.html
index.css
$(function() {
    // ...
    $("#show-custom-message").dxButton({
        text: "Show custom message",
        onClick: function() {
            DevExpress.ui.notify(
                {
                    width: 230,
                    height: 50,
                    position: {
                        my: "bottom",
                        at: "bottom",
                        of: "#container"
                    },
                    contentTemplate: (element) => {
                        element.append('<p>You have a new message</p> &nbsp;');
                        element.append('<i class="dx-icon-email icon-style"></i>');
                    }
                }, 
                "custom", 
                500
            );
        },
    });

});
<html>
    <head>
        <!-- ... -->
    </head>
    <body>
        <div id="container">
            <div id="buttons">
                <!-- ... -->
                <div id="show-custom-message"></div>
            </div>
        </div>
    </body>
</html>
/*  */

.dx-toast-custom {
    background-color: #F05B41;
    color: white;
    border-radius: 5px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-style {
    margin-top: 3px;
}
Angular
app.component.html
app.component.ts
app.module.ts
app.component.css
<div id="container">
    <div id="buttons">
        <!-- ... -->
        <dx-button
            text="Show custom message"
            (onClick)="showCustomMessage()"
        >
        </dx-button>
        <dx-toast
            [(visible)]="isVisible"
            [width]="230"
            [height]="50"
            type="custom"
        >  
            <dxo-position
                my="bottom"
                at="bottom"
                of="#container">
            </dxo-position>
            <div *dxTemplate="let data of 'content'">
                <div class="flex-box">
                    <span>You have a new message &nbsp;</span>
                    <i class="dx-icon-email icon-style"></i>
                </div>
            </div>
        </dx-toast>
    </div>
</div>
import { Component } from '@angular/core';
import notify from 'devextreme/ui/notify';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
    isVisible: boolean = false;
    showCustomMessage() {
        this.isVisible = true;
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxButtonModule, DxToastModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxButtonModule,
        DxToastModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
/*  */

.dx-toast-custom {
    background-color: #F05B41;
    color: white;
    border-radius: 5px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-style {
    margin-top: 3px;
}

.flex-box {
    width: 230px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
Vue
App.vue
<template>
    <div id="container">
        <div id="buttons">
            <!-- ... -->
            <dxButton
                text="Show custom message"
                @click="showCustomMessage"
            >
            </dxButton>
        </div>
        <dxToast
            v-model:visible="isVisible"
            content-template="custom-template"
            :width="230"
            :height="50"
            type="custom"    
        >   
            <DxPosition
                my="bottom"
                at="bottom"
                of="#container"
            />
            <template #custom-template>
                <span>You have a new message &nbsp;</span>
                <i class='dx-icon-email icon-style'></i>
            </template>
        </dxToast>
        </div>
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import { DxButton } from 'devextreme-vue/button';
import { DxToast, DxPosition } from 'devextreme-vue/toast';
import notify from "devextreme/ui/notify";

export default {
    components: {
        DxButton,
        DxToast,
        DxPosition
    }
    data() {
        return {
            // ...
            isVisible: false
        };
    },
    methods: {    
        // ...
        showCustomMessage() {
            this.isVisible = true;
        }
    }
}
</script>

<style>
    /*  */

    .dx-toast-custom {
        background-color: #F05B41;
        color: white;
        border-radius: 5px;
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .icon-style {
        margin-top: 3px;
    }
</style>
React
App.js
index.css
import React, { useState } from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Button } from 'devextreme-react/button';
import { Toast, Position } from 'devextreme-react/toast';
import notify from 'devextreme/ui/notify';

function App() {
    const [isVisible, setIsVisible] = useState(false);
    const showCustomMessage = () => {
        setIsVisible(true);
    }
    const onHiding = () => {
        setIsVisible(false);
    }
    const contentRender = () => {
        return (
            <div class="flex-box">
                <span>You have a new message &nbsp;</span>
                <i class='dx-icon-email icon-style'></i>
            </div>
        );
    }
    return (
        <div id="container">
            <div id="buttons">
                <!-- ... -->
                <Button
                    text="Show custom message"
                    onClick={showCustomMessage}
                >
                </Button>
            </div>
            <Toast
                visible={isVisible}
                width={230}
                height={50}
                type="custom"
                contentRender={contentRender}
                onHiding={onHiding}    
            >   
                <Position
                    my="bottom"
                    at="bottom"
                    of="#container"
                />
            </Toast>
        </div>
    );
}

export default App;
    /*  */

.dx-toast-custom {
    background-color: #F05B41;
    color: white;
    border-radius: 5px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-style {
    margin-top: 3px;
}