This section briefly explains you the steps required to create a simple Toast and demonstrate the basic usage of the Toast component.
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
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.
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';
The Toast message can be rendered by defining an title
or content
.
src/App.tsx
file using following code.import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import { useRef } from 'react';
function App() {
const toastInstance = useRef<ToastComponent>(null);
function toastCreated() {
toastInstance.current.show();
}
return (
<ToastComponent
ref={toastInstance}
title="Sample Toast Title"
content="Sample Toast Content"
created={toastCreated}
/>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
{% endtab %}
npm start
Output will be as follows:
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import { useRef } from 'react';
function App() {
const toastInstance = useRef(null);
function toastCreated() {
toastInstance.current.show();
}
return (<div>
<ToastComponent ref={toastInstance} title="Matt sent you a friend request" content="Hey, wanna dress up as wizards and ride our hoverboards?" created={toastCreated}/>
</div>);
}
export default App;
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import * as ReactDOM from 'react-dom';
import { useRef } from 'react';
function App() {
const toastInstance = useRef<ToastComponent>(null);
function toastCreated() {
toastInstance.current.show();
}
return (
<div>
<ToastComponent
ref={toastInstance}
title="Matt sent you a friend request"
content="Hey, wanna dress up as wizards and ride our hoverboards?"
created={toastCreated}
/>
</div>
);
}
export default App;
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 theid
of the HTML element in a page to which the Toast is initialized.
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import { useRef } from 'react';
function App() {
const toastInstance = useRef(null);
function toastCreated() {
toastInstance.current.show();
}
return (<div id='#toast_target'/>
,
<ToastComponent id="toast_target" ref={toastInstance} title="Sample Toast Title" content="Sample Toast Content" created={toastCreated}/>);
div >
;
;
}
export default App;
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import { useRef } from 'react';
function App() {
const toastInstance = useRef<ToastComponent>(null);
function toastCreated() {
toastInstance.current.show();
}
return (
<div id='#toast_target' />
<ToastComponent
id="toast_target"
ref={toastInstance}
title="Sample Toast Title"
content="Sample Toast Content"
created={toastCreated}
/>
</div>
);
}
export default App;