Getting Started

16 May 202511 minutes to read

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

To easily set up a React application, use create-vite-app, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions. Vite sets up your environment using JavaScript and optimizes your application for production.

Note: To create a React application using create-react-app, refer to this documentation for more details.

To create a new React application, run the following command.

npm create vite@latest my-app

To set-up a React application in TypeScript environment, run the following command.

npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev

To set-up a React application in JavaScript environment, run the following command.

npm create vite@latest my-app -- --template react
cd my-app
npm run dev

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

[Class-component]

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

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'));

[Functional-component]

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

function App() {
    let toastInstance:ToastComponent;

    function toastCreated(): void {
      toastInstance.show();
    }

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

Now run the npm run dev command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.

npm run dev

Output will be as follows:

[Class-component]

import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
class App extends React.Component {
    toastInstance;
    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;
import { ToastComponent  } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import * as ReactDOM from 'react-dom';

class App extends React.Component<{}, {}> {
  public toastInstance:ToastComponent;
  public toastCreated(): void {
    this.toastInstance.show();
  }

  public 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;

[Functional-component]

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

function App() {
  let toastInstance:ToastComponent;
  function toastCreated(): void {
    toastInstance.show();
  }

  return (
    <ToastComponent ref={toast => toastInstance = toast!} title="Matt sent you a friend request" content="Hey, wanna dress up as wizards and ride our hoverboards?" created={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.

[Class-component]

import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
class App extends React.Component {
    toastInstance;
    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;
import { ToastComponent  } from '@syncfusion/ej2-react-notifications';
import * as React from "react";

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

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

  public 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;

[Functional-component]

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

function App() {
  let toastInstance: ToastComponent;

  function toastCreated(): void {
    toastInstance.show();
  }

  return (
    <div>
      <div id='#toast_target' />
      <ToastComponent id='toast_target' ref={toast => toastInstance = toast!} title="Sample Toast Title" content="Sample Toast Content" created={toastCreated.bind(this)} />
    </div>
  );
  
};
export default App;

See Also

NOTE

You can refer to our React Toast feature tour page for its groundbreaking feature representations. You can also explore our React Toast Example that shows you how to render the Toast in React.