Animation in React Toast component
30 Jan 202319 minutes to read
React Toasts support custom animations for both shows and hide actions from the provided animation option of Animation library.
Default animation is given as FadeIn for showing the toast and FadeOut for hiding the toast.
The sample demonstrates some types of animation that suits Toast. You can check all the animation effects here.
[Class-component]
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
class App extends React.Component {
toastInstance;
timeOutDelay = 600;
position = { X: 'Right', Y: 'Bottom' };
animation;
style = { paddingTop: '20px' };
dropDownShowInstance;
dropDownHideInstance;
AnimationDB = ['FadeIn', 'Fadeout', 'FadeZoomIn', 'FadeZoomOut', 'FlipLeftDownIn', 'FlipLeftDownOut', 'FlipLeftUpIn', 'FlipLeftUpOut', 'FlipRightDownIn', 'FlipRightDownOut', 'SlideBottomIn', 'SlideBottomOut', 'ZoomIn', 'ZoomOut'];
toastCreated() {
this.toastShow();
}
toastShow() {
setTimeout(() => {
this.toastInstance.show();
}, this.timeOutDelay);
}
btnClick() {
this.toastShow();
}
valueChange() {
this.toastInstance.animation.show = { effect: this.dropDownShowInstance.value };
}
valueChangeHide() {
this.toastInstance.animation.hide = { effect: this.dropDownHideInstance.value };
}
render() {
return (<div>
<ButtonComponent cssClass="e-primary" onClick={this.btnClick = this.btnClick.bind(this)}> Show Toast</ButtonComponent>
<div className='e-row' style={this.style}>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<label>Show Animation</label>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<DropDownListComponent ref={drop => this.dropDownShowInstance = drop} dataSource={this.AnimationDB} placeholder="Select a ProgressBar Color" change={this.valueChange = this.valueChange.bind(this)} index={0}/>
</div>
</div>
<div className='e-row' style={this.style}>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<label>Hide Animation</label>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<DropDownListComponent ref={drop => this.dropDownHideInstance = drop} dataSource={this.AnimationDB} placeholder="Select a ProgressBar Color" change={this.valueChangeHide = this.valueChangeHide.bind(this)} index={0}/>
</div>
</div>
<ToastComponent ref={toast => this.toastInstance = toast} title='Matt sent you a friend request' content='Hey, wanna dress up as wizards and ride our hoverboards?' position={this.position} animation={this.animation} showProgressBar='true' created={this.toastCreated = this.toastCreated.bind(this)}/>
</div>);
}
}
;
export default App;import { Effect } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
class App extends React.Component<{}, {}> {
public toastInstance: ToastComponent;
public timeOutDelay: number = 600;
public position = { X: 'Right', Y: 'Bottom' };
public animation: { show: { effect: 'SlideRightIn' }, hide: { effect: 'SlideLeftOut' } };
public style = { paddingTop: '20px' };
public dropDownShowInstance: DropDownListComponent;
public dropDownHideInstance: DropDownListComponent;
public AnimationDB = ['FadeIn', 'Fadeout', 'FadeZoomIn', 'FadeZoomOut', 'FlipLeftDownIn', 'FlipLeftDownOut', 'FlipLeftUpIn', 'FlipLeftUpOut', 'FlipRightDownIn', 'FlipRightDownOut', 'SlideBottomIn', 'SlideBottomOut', 'ZoomIn', 'ZoomOut'];
public toastCreated(): void {
this.toastShow();
}
public toastShow() {
setTimeout(
() => {
this.toastInstance.show();
}, this.timeOutDelay);
}
public btnClick(): void {
this.toastShow()
}
public valueChange(): void {
this.toastInstance.animation.show = { effect: this.dropDownShowInstance.value as Effect };
}
public valueChangeHide(): void {
this.toastInstance.animation.hide = { effect: this.dropDownHideInstance.value as Effect };
}
public render() {
return (
<div>
<ButtonComponent cssClass="e-primary" onClick={this.btnClick = this.btnClick.bind(this)}> Show Toast</ButtonComponent>
<div className='e-row' style={this.style}>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<label>Show Animation</label>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<DropDownListComponent ref={drop => this.dropDownShowInstance = drop!} dataSource={this.AnimationDB} placeholder="Select a ProgressBar Color" change={this.valueChange = this.valueChange.bind(this)} index={0} />
</div>
</div>
<div className='e-row' style={this.style}>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<label>Hide Animation</label>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<DropDownListComponent ref={drop => this.dropDownHideInstance = drop!} dataSource={this.AnimationDB} placeholder="Select a ProgressBar Color" change={this.valueChangeHide = this.valueChangeHide.bind(this)} index={0} />
</div>
</div>
<ToastComponent ref={toast => this.toastInstance = toast!} title='Matt sent you a friend request' content='Hey, wanna dress up as wizards and ride our hoverboards?' position={this.position} animation={this.animation} showProgressBar='true' created={this.toastCreated = this.toastCreated.bind(this)} />
</div>
);
}
};
export default App;[Functional-component]
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
function App() {
let toastInstance;
let timeOutDelay = 600;
let position = { X: 'Right', Y: 'Bottom' };
let animation;
let style = { paddingTop: '20px' };
let dropDownShowInstance;
let dropDownHideInstance;
let AnimationDB = ['FadeIn', 'Fadeout', 'FadeZoomIn', 'FadeZoomOut', 'FlipLeftDownIn', 'FlipLeftDownOut', 'FlipLeftUpIn', 'FlipLeftUpOut', 'FlipRightDownIn', 'FlipRightDownOut', 'SlideBottomIn', 'SlideBottomOut', 'ZoomIn', 'ZoomOut'];
function toastCreated() {
toastShow();
}
function toastShow() {
setTimeout(() => {
toastInstance.show();
}, timeOutDelay);
}
function btnClick() {
toastShow();
}
function valueChange() {
toastInstance.animation.show = { effect: dropDownHideInstance.value };
}
function valueChangeHide() {
toastInstance.animation.hide = { effect: dropDownHideInstance.value };
}
return (<div>
<ButtonComponent cssClass="e-primary" onClick={btnClick.bind(this)}> Show Toast</ButtonComponent>
<div className='e-row' style={style}>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<label>Show Animation</label>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<DropDownListComponent ref={drop => dropDownShowInstance = drop} dataSource={AnimationDB} placeholder="Select a ProgressBar Color" change={valueChange.bind(this)} index={0}/>
</div>
</div>
<div className='e-row' style={style}>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<label>Hide Animation</label>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<DropDownListComponent ref={drop => dropDownHideInstance = drop} dataSource={AnimationDB} placeholder="Select a ProgressBar Color" change={valueChangeHide.bind(this)} index={0}/>
</div>
</div>
<ToastComponent ref={toast => toastInstance = toast} title='Matt sent you a friend request' content='Hey, wanna dress up as wizards and ride our hoverboards?' position={position} showProgressBar={true} created={toastCreated.bind(this)} animation={animation}/>
</div>);
}
;
export default App;import { Effect } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
function App(){
let toastInstance: ToastComponent;
let timeOutDelay: number = 600;
let position = { X: 'Right', Y: 'Bottom' };
let animation: { show: { effect: 'SlideRightIn' }, hide: { effect: 'SlideLeftOut' } };
let style = { paddingTop: '20px' };
let dropDownShowInstance: DropDownListComponent;
let dropDownHideInstance: DropDownListComponent;
let AnimationDB = ['FadeIn', 'Fadeout', 'FadeZoomIn', 'FadeZoomOut', 'FlipLeftDownIn', 'FlipLeftDownOut', 'FlipLeftUpIn', 'FlipLeftUpOut', 'FlipRightDownIn', 'FlipRightDownOut', 'SlideBottomIn', 'SlideBottomOut', 'ZoomIn', 'ZoomOut'];
function toastCreated(): void {
toastShow();
}
function toastShow() {
setTimeout(
() => {
toastInstance.show();
}, timeOutDelay);
}
function btnClick(): void {
toastShow()
}
function valueChange(): void {
toastInstance.animation.show = { effect: dropDownHideInstance.value as any}
}
function valueChangeHide(): void {
toastInstance.animation.hide = { effect: dropDownHideInstance.value as any };
}
return (
<div>
<ButtonComponent cssClass="e-primary" onClick={btnClick.bind(this)}> Show Toast</ButtonComponent>
<div className='e-row' style={style}>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<label>Show Animation</label>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<DropDownListComponent ref={drop => dropDownShowInstance = drop!} dataSource={AnimationDB} placeholder="Select a ProgressBar Color" change={valueChange.bind(this)} index={0} />
</div>
</div>
<div className='e-row' style={style}>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<label>Hide Animation</label>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<DropDownListComponent ref={drop => dropDownHideInstance = drop!} dataSource={AnimationDB} placeholder="Select a ProgressBar Color" change={valueChangeHide.bind(this)} index={0} />
</div>
</div>
<ToastComponent ref={toast => toastInstance = toast!} title='Matt sent you a friend request' content='Hey, wanna dress up as wizards and ride our hoverboards?' position={position} showProgressBar={true} created={toastCreated.bind(this)} animation={animation} />
</div>
);
};
export default App;