React Common - Utils - ui

An object that serves as a namespace for DevExtreme UI components as well as for methods implementing UI logic in DevExtreme sites/applications.

Methods

Name Description
hideToasts()

Hides all the Toast components in the application.

dialog

An object that serves as a namespace for methods displaying a message in an application/site.

dxOverlay

An object that serves as a namespace for static methods that affect overlay UI components.

notify(message, stack)

Creates a stackable toast message.

import notify from "devextreme-react/notify"
Parameters:
message:

String

The message content.

stack:

Object

An object with the following structure: {position, direction}.

View Demo

To stack toast messages, specify the position field in the stack object.

The position field can be one of the following:

String Object
Cannot specify coordinates {x, y}, e.g. {100, 50}
'top left' {left, top}
'top center' Use window's and toast's width to calculate the center of the window, then use the 'top' field.
'top right' {right, top}
'left center' Use the 'left' field, then use window's and toast's height to calculate the center of the window.
'center' Use window's and toast's height and width to calculate the center of the window.
'right center' Use the 'right' field, then use window's and toast's height to calculate the center of the window.
'bottom left' {left, bottom}
'bottom center' Use window's and toast's width to calculate the center of the window, then use the 'bottom' field.
'bottom right' {right, bottom}
NOTE
You can specify the starting position for a non-stackable notify message in the options configuration object.

You can also specify the direction field in the stack object. It is a string that can be one of the following:

  • 'up-push'

  • 'down-push'

  • 'left-push'

  • 'right-push'

  • 'up-stack'

  • 'down-stack'

  • 'left-stack'

  • 'right-stack'

The image below shows the difference between directions with 'push' and 'stack' postfixes:

Toast Messages When Direction Is 'up-push' Toast Messages When Direction Is 'up-stack'

When you set the direction to 'up-push', the second and subsequent toasts push the first toast upwards. When you set the direction to 'up-stack', toasts stack on top of each other.

If you do not specify the direction field, its default value is 'down-push' for position: 'top left | top center | top right', and 'up-push' for other position options.

Note that toast messages disappear with an animated effect after their display time ends. The default hide animation duration for toast messages is 400 milliseconds. If multiple messages can stack in your application and block important visual elements, you may want to disable the animation or reduce its duration.

jQuery
JavaScript
$(function() {
    DevExpress.ui.notify("Warning message", { position: "center", direction: "up-push" });
})
Angular
app.component.ts
import { Component, AfterViewInit } from '@angular/core';
import notify from 'devextreme/ui/notify';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
    ngAfterViewInit() { 
        notify("Warning message", { position: "center", direction: "up-push" });
    }
}
Vue
App.vue
<template>
</template>
<script>
import notify from 'devextreme/ui/notify';

export default {
    mounted: function() {
        this.$nextTick(() => {
            notify("Warning message", { position: "center", direction: "up-push" });
        })
    }
}
</script>
React
App.js
import React from 'react';
import notify from 'devextreme/ui/notify';

class App extends React.Component {
    componentDidMount() { 
        notify("Warning message", { position: "center", direction: "up-push" });
    }
}
export default App;

notify(message, type, displayTime)

Creates a toast message.

import notify from "devextreme-react/notify"
Parameters:
message:

String

The message's text.

type:

String

| undefined

The message's type: "info", "warning", "error" or "success".

displayTime:

Number

| undefined

The time interval in milliseconds for which the message is displayed.

jQuery
JavaScript
$(function() {
    DevExpress.ui.notify("Warning message", "warning", 500);
})
Angular
app.component.ts
import { Component, AfterViewInit } from '@angular/core';
import notify from 'devextreme/ui/notify';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
    ngAfterViewInit() { 
        notify("Warning message", "warning", 500);
    }
}
Vue
App.vue
<template>
</template>
<script>
import notify from 'devextreme/ui/notify';

export default {
    mounted: function() {
        this.$nextTick(() => {
            notify("Warning message", "warning", 500);
        })
    }
}
</script>
React
App.js
import React from 'react';
import notify from 'devextreme/ui/notify';

class App extends React.Component {
    componentDidMount() { 
        notify("Warning message", "warning", 500);
    }
}
export default App;

View Demo

notify(options, stack)

Creates a stackable toast message.

import notify from "devextreme-react/notify"
Parameters:
options:

Object

The Toast configuration.

stack:

Object

An object with the following structure: {position, direction}.

View Demo

To stack toast messages, specify the position field in the stack object.

The position field can be one of the following:

String Object
'top left' {left, top}
'top center' Use window's and toast's width to calculate the center of the window, then use the 'top' field.
'top right' {right, top}
'left center' Use the 'left' field, then use window's and toast's height to calculate the center of the window.
'center' Use window's and toast's height and width to calculate the center of the window.
'right center' Use the 'right' field, then use window's and toast's height to calculate the center of the window.
'bottom left' {left, bottom}
'bottom center' Use window's and toast's width to calculate the center of the window, then use the 'bottom' field.
'bottom right' {right, bottom}
NOTE
You can specify the starting position for a non-stackable notify message in the options configuration object.

You can also specify the direction field in the stack object. It is a string that can be one of the following:

  • 'up-push'

  • 'down-push'

  • 'left-push'

  • 'right-push'

  • 'up-stack'

  • 'down-stack'

  • 'left-stack'

  • 'right-stack'

The image below shows the difference between directions with 'push' and 'stack' postfixes:

Toast Messages When Direction Is 'up-push' Toast Messages When Direction Is 'up-stack'

When you set the direction to 'up-push', the second and subsequent toasts push the first toast upwards. When you set the direction to 'up-stack', toasts stack on top of each other.

If you do not specify the direction field, its default value is 'down-push' for position: 'top left | top center | top right', and 'up-push' for other position options.

Note that toast messages disappear with an animated effect after their display time ends. The default hide animation duration for toast messages is 400 milliseconds. If multiple messages can stack in your application and block important visual elements, you may want to disable the animation or reduce its duration.

jQuery
JavaScript
$(function() {
    DevExpress.ui.notify({ message: "Error message", width: 300, shading: true }, { position: "center", direction: "up-push" });
})
Angular
app.component.ts
import { Component, AfterViewInit } from '@angular/core';
import notify from 'devextreme/ui/notify';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
    ngAfterViewInit() { 
        notify({ message: "Error message", width: 300, shading: true }, { position: "center", direction: "up-push" });
    }
}
Vue
App.vue
<template>
</template>
<script>
import notify from 'devextreme/ui/notify';

export default {
    mounted: function() {
        this.$nextTick(() => {
            notify({ message: "Error message", width: 300, shading: true }, { position: "center", direction: "up-push" });
        })
    }
}
</script>
React
App.js
import React from 'react';
import notify from 'devextreme/ui/notify';

class App extends React.Component {
    componentDidMount() { 
        notify({ message: "Error message", width: 300, shading: true }, { position: "center", direction: "up-push" });
    }
}
export default App;

notify(options, type, displayTime)

Creates a toast message.

import notify from "devextreme-react/notify"
Parameters:
options:

Object

The Toast configuration.

type:

String

| undefined

The message's type: "info", "warning", "error" or "success".

displayTime:

Number

| undefined

The time interval in milliseconds for which the message is displayed.

jQuery
JavaScript
$(function() {
    DevExpress.ui.notify({ message: "Error message", width: 300, shading: true }, "error", 500);
})
Angular
app.component.ts
import { Component, AfterViewInit } from '@angular/core';
import notify from 'devextreme/ui/notify';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
    ngAfterViewInit() { 
        notify({ message: "Error message", width: 300, shading: true }, "error", 500);
    }
}
Vue
App.vue
<template>
</template>
<script>
import notify from 'devextreme/ui/notify';

export default {
    mounted: function() {
        this.$nextTick(() => {
            notify({ message: "Error message", width: 300, shading: true }, "error", 500);
        })
    }
}
</script>
React
App.js
import React from 'react';
import notify from 'devextreme/ui/notify';

class App extends React.Component {
    componentDidMount() { 
        notify({ message: "Error message", width: 300, shading: true }, "error", 500);
    }
}
export default App;
See Also

repaintFloatingActionButton()

Repaints the Floating Action Button.

import speedDialAction from "devextreme-react/repaint-floating-action-button"

Call this method to repaint the Floating Action Button after you change the GlobalConfig.floatingActionButtonConfig at runtime:

jQuery
JavaScript
$(function() {
    // ...
    DevExpress.config({
        floatingActionButtonConfig: {
            // ...
        }
    });
    DevExpress.ui.repaintFloatingActionButton();
})
Angular
app.component.ts
import { Component } from '@angular/core';
import config from 'devextreme/core/config';
import repaintFloatingActionButton from 'devextreme/ui/speed_dial_action/repaint_floating_action_button';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    changeFabConfig() {
        config({
            floatingActionButtonConfig: {
                // ...
            }
        });
        repaintFloatingActionButton();
    }
}
Vue
App.vue
<template>
    <!-- ... -->
</template>
<script>
import config from 'devextreme/core/config';
import repaintFloatingActionButton from 'devextreme/ui/speed_dial_action/repaint_floating_action_button';

export default {
    methods: {
        changeFabConfig() {
            config({
                floatingActionButtonConfig: {
                    // ...
                }
            });
            repaintFloatingActionButton();
        }
    }
}
</script>
React
App.js
import React from 'react';

import config from 'devextreme/core/config';
import repaintFloatingActionButton from 'devextreme/ui/speed_dial_action/repaint_floating_action_button';

class App extends React.Component {
    changeFabConfig() {
        config({
            floatingActionButtonConfig: {
                // ...
            }
        });
        repaintFloatingActionButton();
    }
}
export default App;
See Also

themes

An object that serves as a namespace for the methods that work with DevExtreme CSS Themes.

import ui.themes from "devextreme-react/themes"