React Toast - Resize and Relocate
To change the size of the Toast, specify the height and width properties.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { Toast } from 'devextreme-react/toast';
- import { Button } from 'devextreme-react/button';
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- isVisible: false
- };
- this.onClick = this.onClick.bind(this);
- this.onHiding = this.onHiding.bind(this);
- }
- onClick() {
- this.setState({
- isVisible: true
- });
- }
- onHiding() {
- this.setState({
- isVisible: false
- });
- }
- render() {
- return (
- <div>
- <Toast
- visible={this.state.isVisible}
- message="Connection problem"
- type="error"
- height={55}
- width={300}
- onHiding={this.onHiding}
- />
- <Button
- text="Show the Toast"
- onClick={this.onClick}
- />
- </div>
- );
- }
- }
- export default App;
If you need to position the Toast against a specific element on your page, set the position property.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { Toast, Position } from 'devextreme-react/toast';
- import { Button } from 'devextreme-react/button';
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- isVisible: false
- };
- this.onClick = this.onClick.bind(this);
- this.onHiding = this.onHiding.bind(this);
- }
- onClick() {
- this.setState({
- isVisible: true
- });
- }
- onHiding() {
- this.setState({
- isVisible: false
- });
- }
- render() {
- return (
- <div>
- <Toast
- visible={this.state.isVisible}
- message="Connection problem"
- type="error"
- onHiding={this.onHiding}>
- <Position
- my="left"
- at="left"
- of="#targetElement"
- />
- </Toast>
- <Button
- text="Show the Toast"
- onClick={this.onClick}
- />
- </div>
- );
- }
- }
- export default App;
This configuration of the position property reads as follows: "place my left side at the left side of the "#targetElement".
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.