Search results

Getting Started

This section briefly explains you the steps required to create a simple Toast and demonstrate the basic usage of the Toast component.

Dependencies

The following list of dependencies are required to use the Toast component in your application.

|-- @syncfusion/ej2-react-notifications
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-notifications
      |-- @syncfusion/ej2-base
      |-- @syncfusion/ej2-buttons
      |-- @syncfusion/ej2-react-buttons
      |-- @syncfusion/ej2-popups

Installation and configuration

You can use Create-react-app to setup the applications. To install create-react-app run the following command.

npm install -g create-react-app

Start a new project using create-react-app command as follows

create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart
create-react-app quickstart

cd quickstart

Install the below required dependency package in order to use the Toast component in your application.

npm install @syncfusion/ej2-react-notifications –save

The above package installs Toast dependencies which are required to render the Toast component in React environment.

  • Toast CSS files are available in the ej2-react-notifications package folder. Import the Toast component’s required CSS references as follows in src/App.css.
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-react-buttons/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-react-popups/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-react-notifications/styles/material.css';

Initialize the Toast with message

The Toast message can be rendered by defining an title or content.

  • Import the Toast component to your src/App.tsx file using following code.

{% compileJsx=true %}

import { ToastComponent  } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import './App.css';

class App extends React.Component<{}, {}> {
  public toastInstance:ToastComponent;

  public toastCreated(): void {
    this.toastInstance.show();
  }

  public render() {
    return (
      <ToastComponent ref={toast => this.toastInstance = toast!} title="Sample Toast Title" content="Sample Toast Content" created={this.toastCreated = this.toastCreated.bind(this)} />
    );
  }
};
ReactDOM.render(<App />, document.getElementById('element'));

{% endtab %}

  • Run the application in the browser using the following command.
npm start

Output will be as follows:

Source
Preview
index.tsx
index.html
App.css.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React Accordion Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #multiToast>div>button {
            margin-top: 20px;
        }

        #customChoose {
            display: none;
        }

        #toast_full_Position table {
            width: 100%;
        }

        #toast_full_width,
        #toast_full_Position {
            padding-top: 20px;
            margin: 20px;
        }

        #toast_full_width table td>div,
        #toast_full_Position table td>div {
            padding: 25px 0 0 0;
        }

        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        #elementTarget .e-toast-message {
            width: 100%;
        }

        .progress {
            height: 20px;
            position: relative;
            margin: 20px 0 20px 0;
            background: #555;
            -moz-border-radius: 25px;
            -webkit-border-radius: 25px;
            border-radius: 25px;
            box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
        }

        .progress span {
            background-color: #f0a3a3;
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
            display: block;
            height: 100%;
            border-radius: 10px;
            width: 50%;
            position: relative;
            overflow: hidden;
        }

        .progress span::after {
            background-image: -webkit-gradient(linear, 0 0, 100% 100%,
            color-stop(.25, rgba(255, 255, 255, .2)),
            color-stop(.25, transparent), color-stop(.5, transparent),
            color-stop(.5, rgba(255, 255, 255, .2)),
            color-stop(.75, rgba(255, 255, 255, .2)),
            color-stop(.75, transparent), to(transparent));
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-size: 50px 50px;
            -webkit-animation: moveAnimate 2s linear infinite;
            overflow: hidden;
        }

        @-webkit-keyframes moveAnimate {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 50px 50px;
            }
        }

        #elementToastTime {
            text-align: center;
        }

        #elementToastTime img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        #elementToastTime .e-toast-message {
            width: inherit;
        }


        body> #template_toast .e-toast {
            width: 400px !important;
        }


        #template_toast .horizontal-align {
            margin: 10px 0;
        }

        #template_toast .horizontal-align .toast-content .toast-message {
            opacity: 0.4;
        }

        #template_toast .horizontal-align .toast-content {
            display: inline-flex;
            flex: 1;
            flex-direction: column;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
    <div id='templateToast' style="display: none;color:red"> System affected by virus !!! </div>
</body>
<script id="template_toast_ele" type="text/x-template">
    <div id='template_toast' style="display: none">
        <div class="horizontal-align">
            <div class='toast-content'>
                <div class='toast-title'>
                    Weekend Alarm
                </div>
                <div class='toast-message'> With traffic, its likely to take 45 minutes to get to jenny's 24th Birthday Bash at Hillside Bar, 454 E.
                    Olive Way by 10:00PM </div>
            </div>
        </div>
        <img src="http://npmci.syncfusion.com/development/demos/src/toast/resource/map.jpg" width="100%" height="70%">
    </div>
</script>

</html>
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import './App.css';
class App extends React.Component {
    toastCreated() {
        this.toastInstance.show();
    }
    render() {
        return (<ToastComponent ref={toast => this.toastInstance = toast} title="Matt sent you a friend request" content="Hey, wanna dress up as wizards and ride our hoverboards?" created={this.toastCreated = this.toastCreated.bind(this)}/>);
    }
}
;
export default App;

Initialize the Toast with target

By default toast can be rendered in document body, we can change the target position for toast rendering using target property.

In the above sample code, #element is the id of the HTML element in a page to which the Toast is initialized.

Source
Preview
index.tsx
index.html
App.css.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React Accordion Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #multiToast>div>button {
            margin-top: 20px;
        }

        #customChoose {
            display: none;
        }

        #toast_full_Position table {
            width: 100%;
        }

        #toast_full_width,
        #toast_full_Position {
            padding-top: 20px;
            margin: 20px;
        }

        #toast_full_width table td>div,
        #toast_full_Position table td>div {
            padding: 25px 0 0 0;
        }

        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        #elementTarget .e-toast-message {
            width: 100%;
        }

        .progress {
            height: 20px;
            position: relative;
            margin: 20px 0 20px 0;
            background: #555;
            -moz-border-radius: 25px;
            -webkit-border-radius: 25px;
            border-radius: 25px;
            box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
        }

        .progress span {
            background-color: #f0a3a3;
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
            display: block;
            height: 100%;
            border-radius: 10px;
            width: 50%;
            position: relative;
            overflow: hidden;
        }

        .progress span::after {
            background-image: -webkit-gradient(linear, 0 0, 100% 100%,
            color-stop(.25, rgba(255, 255, 255, .2)),
            color-stop(.25, transparent), color-stop(.5, transparent),
            color-stop(.5, rgba(255, 255, 255, .2)),
            color-stop(.75, rgba(255, 255, 255, .2)),
            color-stop(.75, transparent), to(transparent));
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-size: 50px 50px;
            -webkit-animation: moveAnimate 2s linear infinite;
            overflow: hidden;
        }

        @-webkit-keyframes moveAnimate {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 50px 50px;
            }
        }

        #elementToastTime {
            text-align: center;
        }

        #elementToastTime img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        #elementToastTime .e-toast-message {
            width: inherit;
        }


        body> #template_toast .e-toast {
            width: 400px !important;
        }


        #template_toast .horizontal-align {
            margin: 10px 0;
        }

        #template_toast .horizontal-align .toast-content .toast-message {
            opacity: 0.4;
        }

        #template_toast .horizontal-align .toast-content {
            display: inline-flex;
            flex: 1;
            flex-direction: column;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
    <div id='templateToast' style="display: none;color:red"> System affected by virus !!! </div>
</body>
<script id="template_toast_ele" type="text/x-template">
    <div id='template_toast' style="display: none">
        <div class="horizontal-align">
            <div class='toast-content'>
                <div class='toast-title'>
                    Weekend Alarm
                </div>
                <div class='toast-message'> With traffic, its likely to take 45 minutes to get to jenny's 24th Birthday Bash at Hillside Bar, 454 E.
                    Olive Way by 10:00PM </div>
            </div>
        </div>
        <img src="http://npmci.syncfusion.com/development/demos/src/toast/resource/map.jpg" width="100%" height="70%">
    </div>
</script>

</html>
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import './App.css';
class App extends React.Component {
    toastCreated() {
        this.toastInstance.show();
    }
    render() {
        return (<div>
        <div id='#toast_target'/>
        <ToastComponent id='toast_target' ref={toast => this.toastInstance = toast} title="Sample Toast Title" content="Sample Toast Content" created={this.toastCreated = this.toastCreated.bind(this)}/>
      </div>);
    }
}
;
export default App;

See Also