React Common - Utils

This section describes an API that can be used in different application parts such as UI components, data and the application framework.

animationPresets

A repository of animations.

import { animationPresets } from "devextreme/common/core/animation"
Type:

Object

To avoid defining animations each time you animate an element(s), register different animations in the DevExtreme.animationPresets repository and request them by associated names when required. This repository has a built-in set of animations. Here they are:

  • fade
  • stagger-fade
  • slide
  • stagger-slide
  • ios7-slide
  • overflow
  • ios7-toolbar
  • stagger-smooth-drop
  • stagger-drop
  • stagger-3d-drop
NOTE
Stagger-like animations are executed by the transitionExecutor only. They cannot be applied by calling the animate method for a particular element.

To populate the animationPresets repository with your animations, use the registerPreset(name, config) method. To get the required animation from the repository, use the getPreset(name) method.

config()

Gets the current global configuration.

import { config } from "devextreme/common"
Return Value:

GlobalConfig

The global configuration.

config(config)

Configures your application before its launch.

import { config } from "devextreme/common"
Parameters:
config:

GlobalConfig

Global configuration properties.

jQuery
index.js
DevExpress.config({
    rtlEnabled: true,
    forceIsoDateParsing: false,
    // ...
});
// ===== or when using modules =====
import config from "devextreme/core/config";

config({
    rtlEnabled: true,
    forceIsoDateParsing: false,
    // ...
})
Angular
app.component.ts
import config from "devextreme/core/config";

config({
    rtlEnabled: true,
    forceIsoDateParsing: false,
    // ...
})
Vue
App.vue
import config from "devextreme/core/config";

config({
    rtlEnabled: true,
    forceIsoDateParsing: false,
    // ...
})
React
App.js
import config from "devextreme/core/config";

config({
    rtlEnabled: true,
    forceIsoDateParsing: false,
    // ...
})
NOTE
This method should be called only once - at the application's launch. It is necessary to reload the page each time you need to apply new global configuration parameters.

devices

An object that serves as a namespace for the methods and events specifying information on the current device.

events

This namespace provides methods for controlling events without using jQuery.

excelExporter

An object that serves as a namespace for the methods that export DevExtreme UI components to Excel.

fx

An object that serves as a namespace for the methods that are used to animate UI elements.

import { fx } from "devextreme/common/core/animation"
Type:

Object

hideTopOverlay()

Hides the last displayed overlay UI component.

import { hideTopOverlay } from "devextreme/common/core/environment"
Return Value:

Boolean

true if hiding was successful; false if not or if no displayed overlay UI component was found.

localization

An object that serves as a namespace for the methods that are used to localize an application.

See Also

pdfExporter

An object that serves as a namespace for the methods that export DevExtreme UI components to PDF.

setTemplateEngine(options)

Sets custom functions that compile and render templates.

import { setTemplateEngine } from "devextreme/common"
Parameters:
templateEngineOptions:

Object

An object that contains the functions.

Object structure:
Name Type Description
compile

Function

A function that parses the passed HTML markup and returns a template.
render

Function

A function that inserts data into the template returned from the compile function and returns HTML markup to be rendered.

TransitionExecutor

The manager that performs several specified animations at a time.

import { TransitionExecutor } from "devextreme/common/core/animation"

While there are scenarios when animating certain elements is required, there can be more complex scenarios when you need to perform a transition - several animations of different elements performed simultaneously. For instance, when you navigate from a view to another view in a mobile application, the content of the new view replaces the content of the old view. Moreover, the header can be animated differently from the rest of the content on both views. Thus, four different animations must be performed simultaneously. To simplify the implementation of such scenarios, the TransitionExecutor is implemented.

To register the set of animations to be performed simultaneously, use the enter(elements, animation) and leave(elements, animation) methods of the TransitionExecutor object. Use the enter(elements, animation) method to specify the elements that should appear ("enter") on the page with a specified animation. The leave(elements, animation) method should be called if there are elements that must disappear ("leave") from the page.

The TransitionExecutor object is also useful when a need arises to perform a staggered animation of elements when elements are animated with a slight delay after animation of each successive element starts resulting in a curtain-like effect. In this instance, each element should be registered with by the enter(elements, animation)/leave(elements, animation) method with the animation configuration where the staggerDelay property is specified.

To start a transition, call the start() method of the TransitionExecutor object. To clear the registered set of animations in the TransitionExecutor object, call the reset() method.

ui

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

utils

An object that serves as a namespace for utility methods that can be helpful when working with DevExtreme components.

validationEngine

An object that serves as a namespace for the methods required to perform validation.

import validationEngine from "devextreme-react/validation-engine"

viz

An object that serves as a namespace for DevExtreme Data Visualization Components.

Errors and Warnings

This section lists core errors and warnings that may occur in DevExtreme applications.