React Toast - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your 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 four different sets of arguments.

The basic syntax is notify(message, type, displayTime). You should 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.

To stack Toasts, call the notify(message, stack) or notify(options, stack) method (depending on the complexity of the notification content). The first method accepts only the message as the first argument, while the second method accepts a Toast configuration object. The second argument in both methods specifies stacking settings.

For more information about stacking Toasts, refer to the following online demo: Toast Stack Demo.

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

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

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.

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;
  • }