Position in React Toast component
29 Aug 202324 minutes to read
Toast position can be updated based on predefined positions or user customizable positions. Predefined position combinations are updated in X and Y position properties.
Predefined
X Positions
- Left
- Center
- Right
Y Positions
- Top
- Bottom
In the case of multiple Toast display, new Toast position will not update on dynamic change of property values, until the old Toast messages removed.
Toast occupies full width when we set width as ‘100%’, so X positions won’t affect changes when ‘100%’ width.
Custom
Custom X and Y Position can be given as pixels/numbers/percentage. The number value is considered as pixels. based value top and left value updated in the toast.
[Class-component]
import { ButtonComponent, RadioButtonComponent } 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;
customFlag;
checkboxObj;
dropDownInstance;
radioInstance1;
radioInstance;
radioInstance2;
radioInstance3;
timeOutDelay = 600;
dropdownDB = ['Top Left', 'Top Right', 'Top Center', 'Bottom Left', 'Bottom Right', 'Bottom Center'];
constructor(props) {
super(props);
this.state = {
position: { X: 'Center', Y: "Bottom" },
target: document.body,
width: 300
};
}
toastCreated() {
this.toastShow(600);
}
toastShow(timeOutDelay) {
setTimeout(() => {
this.toastInstance.show();
}, timeOutDelay);
}
valueChange(e) {
this.toastInstance.hide('All');
this.setToastPosValue(e.value);
this.toastShow(1000);
}
radioChange(e) {
if (this.radioInstance.element.checked) {
this.toastInstance.hide('All');
document.getElementById('dropdownChoose').style.display = 'table-cell';
document.getElementById('customChoose').style.display = 'none';
this.setToastPosValue(this.dropDownInstance.value.toString());
this.customFlag = true;
this.toastShow(1000);
}
}
radioChange3(e) {
if (this.radioInstance3.element.checked) {
this.toastInstance.hide('All');
this.setState({ target: document.body });
this.toastShow(1000);
}
}
radioChange2(e) {
if (this.radioInstance2.element.checked) {
this.toastInstance.hide('All');
this.setState({ target: '#toast_pos_target' });
this.toastShow(1000);
}
}
radioChange1(e) {
if (this.radioInstance1.element.checked) {
this.toastInstance.hide('All');
document.getElementById('dropdownChoose').style.display = 'none';
document.getElementById('customChoose').style.display = 'table-cell';
this.setCustomPosValue();
this.customFlag = true;
this.toastShow(1000);
}
}
setCustomPosValue() {
this.setState({
position: {
X: parseInt(document.getElementById('xPos').value, 10),
Y: parseInt(document.getElementById('yPos').value, 10)
}
});
}
setToastPosValue(value) {
value = value.toLowerCase().replace(' ', '');
switch (value) {
case 'topleft':
this.setState({ position: { X: 'Left', Y: 'Top' } });
break;
case 'topright':
this.setState({ position: { X: 'Right', Y: 'Top' } });
break;
case 'topcenter':
this.setState({ position: { X: 'Center', Y: 'Top' } });
break;
case 'topfullwidth':
this.setState({ position: { X: 'Center', Y: 'Top' }, width: '100%' });
break;
case 'bottomleft':
this.setState({ position: { X: 'Left', Y: 'Bottom' } });
break;
case 'bottomright':
this.setState({ position: { X: 'Right', Y: 'Bottom' } });
break;
case 'bottomcenter':
this.setState({ position: { X: 'Center', Y: 'Bottom' } });
break;
case 'bottomfullwidth':
this.setState({ position: { X: 'Center', Y: 'Bottom' }, width: '100%' });
break;
}
}
render() {
return (<div id="toast_pos_target">
<div id="toast_full_Position" className='row'>
<table>
<tbody>
<tr>
<td>
<div>
<RadioButtonComponent ref={custom => this.radioInstance = custom} checked={true} label='Position' name="position" change={this.radioChange = this.radioChange.bind(this)}/>
</div>
</td>
<td>
<div>
<RadioButtonComponent ref={custom => this.radioInstance1 = custom} label='Custom' name="position" change={this.radioChange1 = this.radioChange1.bind(this)}/>
</div>
</td>
</tr>
<tr>
<td id="dropdownChoose" colSpan={2}>
<div>
<DropDownListComponent ref={drop => this.dropDownInstance = drop} id="ddlelement" dataSource={this.dropdownDB} placeholder="Select a Position" change={this.valueChange = this.valueChange.bind(this)} index='4'/>
</div>
</td>
</tr>
<tr>
<td id='customChoose'>
<div className='e-row'>
<div className='e-float-input'>
<input type='text' className='e-input' id='xPos' defaultValue={'50'} required={true}/>
<span className='e-float-line'/>
<label className="e-float-text">X Position</label>
</div>
</div>
<div className='e-row'>
<div className='e-float-input'>
<input type='text' className='e-input' id='yPos' defaultValue={'50'} required={true}/>
<span className='e-float-line'/>
<label className="e-float-text">Y Position</label>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div>
<RadioButtonComponent ref={custom => this.radioInstance2 = custom} checked={true} label='Target' name="toast" change={this.radioChange2 = this.radioChange2.bind(this)}/>
</div>
</td>
<td>
<div>
<RadioButtonComponent ref={custom => this.radioInstance3 = custom} checked={true} label='Global' name="toast" change={this.radioChange3 = this.radioChange3.bind(this)}/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<ButtonComponent cssClass="e-primary" onClick={this.toastShow = this.toastShow.bind(this, 500)}> Show Toast </ButtonComponent>
<ToastComponent ref={toast => this.toastInstance = toast} title="Matt sent you a friend request" content="Hey, wanna dress up as wizards and ride our hoverboards?" target={this.state.target} width={this.state.width} position={this.state.position} created={this.toastCreated = this.toastCreated.bind(this)}/>
</div>);
}
}
;
export default App;import { ButtonComponent, CheckBoxComponent, RadioButtonComponent } 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<{}, {position: any, target: any, width: any}> {
public toastInstance: ToastComponent;
public customFlag: boolean;
public checkboxObj: CheckBoxComponent;
public dropDownInstance: DropDownListComponent;
public radioInstance1: RadioButtonComponent;
public radioInstance: RadioButtonComponent;
public radioInstance2: RadioButtonComponent;
public radioInstance3: RadioButtonComponent;
public timeOutDelay: number = 600;
public dropdownDB = ['Top Left', 'Top Right', 'Top Center', 'Bottom Left', 'Bottom Right', 'Bottom Center'];
constructor(props: any) {
super(props);
this.state = {
position: { X: 'Center', Y: "Bottom" },
target: document.body,
width: 300
}
}
public toastCreated(): void {
this.toastShow(600);
}
public toastShow(timeOutDelay: number) {
setTimeout(
() => {
this.toastInstance.show();
}, timeOutDelay);
}
public valueChange(e: any): void {
this.toastInstance.hide('All');
this.setToastPosValue(e.value);
this.toastShow(1000);
}
public radioChange(e: any): void {
if (this.radioInstance.element.checked) {
this.toastInstance.hide('All');
(document.getElementById('dropdownChoose') as HTMLElement).style.display = 'table-cell';
(document.getElementById('customChoose') as HTMLElement).style.display = 'none';
this.setToastPosValue(this.dropDownInstance.value.toString());
this.customFlag = true;
this.toastShow(1000);
}
}
public radioChange3(e: any): void {
if (this.radioInstance3.element.checked) {
this.toastInstance.hide('All');
this.setState({ target: document.body });
this.toastShow(1000);
}
}
public radioChange2(e: any): void {
if (this.radioInstance2.element.checked) {
this.toastInstance.hide('All');
this.setState({ target: '#toast_pos_target' });
this.toastShow(1000);
}
}
public radioChange1(e: any): void {
if (this.radioInstance1.element.checked) {
this.toastInstance.hide('All');
(document.getElementById('dropdownChoose') as HTMLElement).style.display = 'none';
(document.getElementById('customChoose') as HTMLElement).style.display = 'table-cell';
this.setCustomPosValue();
this.customFlag = true;
this.toastShow(1000);
}
}
public setCustomPosValue(): void {
this.setState({
position: {
X: parseInt((document.getElementById('xPos') as HTMLInputElement).value, 10),
Y: parseInt((document.getElementById('yPos') as HTMLInputElement).value, 10)
}
});
}
public setToastPosValue(value: string): void {
value = value.toLowerCase().replace(' ', '');
switch (value) {
case 'topleft':
this.setState({ position: { X: 'Left', Y: 'Top' } });
break;
case 'topright':
this.setState({ position: { X: 'Right', Y: 'Top' } });
break;
case 'topcenter':
this.setState({ position: { X: 'Center', Y: 'Top' } });
break;
case 'topfullwidth':
this.setState({ position: { X: 'Center', Y: 'Top' }, width: '100%' });
break;
case 'bottomleft':
this.setState({ position: { X: 'Left', Y: 'Bottom' } });
break;
case 'bottomright':
this.setState({ position: { X: 'Right', Y: 'Bottom' } });
break;
case 'bottomcenter':
this.setState({ position: { X: 'Center', Y: 'Bottom' } });
break;
case 'bottomfullwidth':
this.setState({ position: { X: 'Center', Y: 'Bottom' }, width: '100%' });
break;
}
}
public render() {
return (
<div id="toast_pos_target">
<div id="toast_full_Position" className='row'>
<table>
<tbody>
<tr>
<td>
<div>
<RadioButtonComponent ref={custom => this.radioInstance = custom!} checked={true} label='Position' name="position" change={this.radioChange = this.radioChange.bind(this)} />
</div>
</td>
<td>
<div>
<RadioButtonComponent ref={custom => this.radioInstance1 = custom!} label='Custom' name="position" change={this.radioChange1 = this.radioChange1.bind(this)} />
</div>
</td>
</tr>
<tr>
<td id="dropdownChoose" colSpan={2}>
<div>
<DropDownListComponent ref={drop => this.dropDownInstance = drop!} id="ddlelement" dataSource={this.dropdownDB} placeholder="Select a Position" change={this.valueChange = this.valueChange.bind(this)} index='4' />
</div>
</td>
</tr>
<tr>
<td id='customChoose'>
<div className='e-row'>
<div className='e-float-input'>
<input type='text' className='e-input' id='xPos' defaultValue={'50'} required={true} />
<span className='e-float-line' />
<label className="e-float-text">X Position</label>
</div>
</div>
<div className='e-row'>
<div className='e-float-input'>
<input type='text' className='e-input' id='yPos' defaultValue={'50'} required={true} />
<span className='e-float-line' />
<label className="e-float-text">Y Position</label>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div>
<RadioButtonComponent ref={custom => this.radioInstance2 = custom!} checked={true} label='Target' name="toast" change={this.radioChange2 = this.radioChange2.bind(this)} />
</div>
</td>
<td>
<div>
<RadioButtonComponent ref={custom => this.radioInstance3 = custom!} checked={true} label='Global' name="toast" change={this.radioChange3 = this.radioChange3.bind(this)} />
</div>
</td>
</tr>
</tbody>
</table>
</div>
<ButtonComponent cssClass="e-primary" onClick={this.toastShow = this.toastShow.bind(this, 500)}> Show Toast </ButtonComponent>
<ToastComponent ref={toast => this.toastInstance = toast!} title="Matt sent you a friend request" content="Hey, wanna dress up as wizards and ride our hoverboards?" target={this.state.target} width={this.state.width} position={this.state.position} created={this.toastCreated = this.toastCreated.bind(this)} />
</div>
);
}
};
export default App;[Functional-component]
import { ButtonComponent, RadioButtonComponent } 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(position, target, width) {
let toastInstance;
let customFlag;
let checkboxObj;
let dropDownInstance;
let radioInstance1;
let radioInstance;
let radioInstance2;
let radioInstance3;
let timeOutDelay = 600;
let dropdownDB = ['Top Left', 'Top Right', 'Top Center', 'Bottom Left', 'Bottom Right', 'Bottom Center'];
const [state1, setStatus1] = React.useState({ position: { X: 'Center', Y: "Bottom" } });
const [state2, setStatus2] = React.useState({ target: document.body });
const [state3, setStatus3] = React.useState({ width: '300' });
function toastCreated() {
toastShow(600);
}
function toastShow(timeOutDelay) {
setTimeout(() => {
toastInstance.show();
}, timeOutDelay);
}
function valueChange(e) {
toastInstance.hide('All');
setToastPosValue(e.value);
toastShow(1000);
}
function radioChange(e) {
if (radioInstance.element.checked) {
toastInstance.hide('All');
document.getElementById('dropdownChoose').style.display = 'table-cell';
document.getElementById('customChoose').style.display = 'none';
setToastPosValue(dropDownInstance.value.toString());
customFlag = true;
toastShow(1000);
}
}
function radioChange3(e) {
if (radioInstance3.element.checked) {
toastInstance.hide('All');
setStatus2({ target: document.body });
toastShow(1000);
}
}
function radioChange2(e) {
if (radioInstance2.element.checked) {
toastInstance.hide('All');
setStatus2({ target: '#toast_pos_target' });
toastShow(1000);
}
}
function radioChange1(e) {
if (radioInstance1.element.checked) {
toastInstance.hide('All');
document.getElementById('dropdownChoose').style.display = 'none';
document.getElementById('customChoose').style.display = 'table-cell';
setCustomPosValue();
customFlag = true;
toastShow(1000);
}
}
function setCustomPosValue() {
setStatus1({
position: {
X: parseInt(document.getElementById('xPos').value),
Y: parseInt(document.getElementById('yPos').value)
}
});
}
function setToastPosValue(value) {
value = value.toLowerCase().replace(' ', '');
switch (value) {
case 'topleft':
setStatus1({ position: { X: 'Left', Y: 'Top' } });
break;
case 'topright':
setStatus1({ position: { X: 'Right', Y: 'Top' } });
break;
case 'topcenter':
setStatus1({ position: { X: 'Center', Y: 'Top' } });
break;
case 'topfullwidth':
setStatus1({ position: { X: 'Center', Y: 'Top' } });
setStatus3({ width: '100%' });
break;
case 'bottomleft':
setStatus1({ position: { X: 'Left', Y: 'Bottom' } });
break;
case 'bottomright':
setStatus1({ position: { X: 'Right', Y: 'Bottom' } });
break;
case 'bottomcenter':
setStatus1({ position: { X: 'Center', Y: 'Bottom' } });
break;
case 'bottomfullwidth':
setStatus1({ position: { X: 'Center', Y: 'Bottom' } });
setStatus3({ width: '100%' });
break;
}
}
return (<div id="toast_pos_target">
<div id="toast_full_Position" className='row'>
<table>
<tbody>
<tr>
<td>
<div>
<RadioButtonComponent ref={custom => radioInstance = custom} checked={true} label='Position' name="position" change={radioChange.bind(this)}/>
</div>
</td>
<td>
<div>
<RadioButtonComponent ref={custom => radioInstance1 = custom} label='Custom' name="position" change={radioChange1.bind(this)}/>
</div>
</td>
</tr>
<tr>
<td id="dropdownChoose" colSpan={2}>
<div>
<DropDownListComponent ref={drop => dropDownInstance = drop} id="ddlelement" dataSource={dropdownDB} placeholder="Select a Position" change={valueChange.bind(this)} index={4}/>
</div>
</td>
</tr>
<tr>
<td id='customChoose'>
<div className='e-row'>
<div className='e-float-input'>
<input type='text' className='e-input' id='xPos' defaultValue={'50'} required={true}/>
<span className='e-float-line'/>
<label className="e-float-text">X Position</label>
</div>
</div>
<div className='e-row'>
<div className='e-float-input'>
<input type='text' className='e-input' id='yPos' defaultValue={'50'} required={true}/>
<span className='e-float-line'/>
<label className="e-float-text">Y Position</label>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div>
<RadioButtonComponent ref={custom => radioInstance2 = custom} checked={true} label='Target' name="toast" change={radioChange2.bind(this)}/>
</div>
</td>
<td>
<div>
<RadioButtonComponent ref={custom => radioInstance3 = custom} checked={true} label='Global' name="toast" change={radioChange3.bind(this)}/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<ButtonComponent cssClass="e-primary" onClick={toastShow.bind(this, 500)}> Show Toast </ButtonComponent>
<ToastComponent ref={toast => toastInstance = toast} title="Matt sent you a friend request" content="Hey, wanna dress up as wizards and ride our hoverboards?" target={state2.target} width={state3.width} position={state1.position} created={toastCreated.bind(this)}/>
</div>);
}
export default App;import { ButtonComponent, CheckBoxComponent, RadioButtonComponent } 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(position: any, target: any, width: any){
let toastInstance: ToastComponent;
let customFlag: boolean;
let checkboxObj: CheckBoxComponent;
let dropDownInstance: DropDownListComponent;
let radioInstance1: RadioButtonComponent;
let radioInstance: RadioButtonComponent;
let radioInstance2: RadioButtonComponent;
let radioInstance3: RadioButtonComponent;
let timeOutDelay: number = 600;
let dropdownDB = ['Top Left', 'Top Right', 'Top Center', 'Bottom Left', 'Bottom Right', 'Bottom Center'];
const [state1, setStatus1] = React.useState({position: { X: 'Center', Y: "Bottom" }});
const [state2, setStatus2] = React.useState({target: document.body});
const [state3, setStatus3] = React.useState({width: '300'});
function toastCreated(): void {
toastShow(600);
}
function toastShow(timeOutDelay: number) {
setTimeout(
() => {
toastInstance.show();
}, timeOutDelay);
}
function valueChange(e: any): void {
toastInstance.hide('All');
setToastPosValue(e.value);
toastShow(1000);
}
function radioChange(e: any): void {
if (radioInstance.element.checked) {
toastInstance.hide('All');
(document.getElementById('dropdownChoose') as HTMLElement).style.display = 'table-cell';
(document.getElementById('customChoose') as HTMLElement).style.display = 'none';
setToastPosValue(dropDownInstance.value.toString());
customFlag = true;
toastShow(1000);
}
}
function radioChange3(e: any): void {
if (radioInstance3.element.checked) {
toastInstance.hide('All');
setStatus2({ target: document.body });
toastShow(1000);
}
}
function radioChange2(e: any): void {
if (radioInstance2.element.checked) {
toastInstance.hide('All');
setStatus2({ target: '#toast_pos_target'});
toastShow(1000);
}
}
function radioChange1(e: any): void {
if (radioInstance1.element.checked) {
toastInstance.hide('All');
(document.getElementById('dropdownChoose') as HTMLElement).style.display = 'none';
(document.getElementById('customChoose') as HTMLElement).style.display = 'table-cell';
setCustomPosValue();
customFlag = true;
toastShow(1000);
}
}
function setCustomPosValue(): void {
setStatus1({
position: {
X: parseInt((document.getElementById('xPos') as HTMLInputElement).value),
Y: parseInt((document.getElementById('yPos') as HTMLInputElement).value)
}
});
}
function setToastPosValue(value: string): void {
value = value.toLowerCase().replace(' ', '');
switch (value) {
case 'topleft':
setStatus1({ position: { X: 'Left', Y: 'Top' } });
break;
case 'topright':
setStatus1({ position: { X: 'Right', Y: 'Top' } });
break;
case 'topcenter':
setStatus1({ position: { X: 'Center', Y: 'Top' } });
break;
case 'topfullwidth':
setStatus1({ position: { X: 'Center', Y: 'Top' }});
setStatus3({width: '100%' });
break;
case 'bottomleft':
setStatus1({ position: { X: 'Left', Y: 'Bottom' } });
break;
case 'bottomright':
setStatus1({ position: { X: 'Right', Y: 'Bottom' } });
break;
case 'bottomcenter':
setStatus1({ position: { X: 'Center', Y: 'Bottom' } });
break;
case 'bottomfullwidth':
setStatus1({ position: { X: 'Center', Y: 'Bottom' }});
setStatus3({width: '100%' });
break;
}
}
return (
<div id="toast_pos_target">
<div id="toast_full_Position" className='row'>
<table>
<tbody>
<tr>
<td>
<div>
<RadioButtonComponent ref={custom => radioInstance = custom!} checked={true} label='Position' name="position" change={radioChange.bind(this)} />
</div>
</td>
<td>
<div>
<RadioButtonComponent ref={custom => radioInstance1 = custom!} label='Custom' name="position" change={radioChange1.bind(this)} />
</div>
</td>
</tr>
<tr>
<td id="dropdownChoose" colSpan={2}>
<div>
<DropDownListComponent ref={drop => dropDownInstance = drop!} id="ddlelement" dataSource={dropdownDB} placeholder="Select a Position" change={valueChange.bind(this)} index={4} />
</div>
</td>
</tr>
<tr>
<td id='customChoose'>
<div className='e-row'>
<div className='e-float-input'>
<input type='text' className='e-input' id='xPos' defaultValue={'50'} required={true} />
<span className='e-float-line' />
<label className="e-float-text">X Position</label>
</div>
</div>
<div className='e-row'>
<div className='e-float-input'>
<input type='text' className='e-input' id='yPos' defaultValue={'50'} required={true} />
<span className='e-float-line' />
<label className="e-float-text">Y Position</label>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div>
<RadioButtonComponent ref={custom => radioInstance2 = custom!} checked={true} label='Target' name="toast" change={radioChange2.bind(this)} />
</div>
</td>
<td>
<div>
<RadioButtonComponent ref={custom => radioInstance3 = custom!} checked={true} label='Global' name="toast" change={radioChange3.bind(this)} />
</div>
</td>
</tr>
</tbody>
</table>
</div>
<ButtonComponent cssClass="e-primary" onClick={toastShow.bind(this, 500)}> Show Toast </ButtonComponent>
<ToastComponent ref={toast => toastInstance = toast!} title="Matt sent you a friend request" content="Hey, wanna dress up as wizards and ride our hoverboards?" target={state2.target} width={state3.width} position={state1.position} created={toastCreated.bind(this)} />
</div>
);
}
export default App;