DevExtreme for React - 70+ UI and Data Visualization React Components Available as RTM (v18.2)

Good news for React users: in our v18.2 release we include the RTM version of our DevExtreme widgets for React! Since the pre-release that came with v18.1 we have worked to test and finalize the functionality. Our support people are happy to help you with any issues you encounter and give you the help you need to use DevExtreme widgets in your React apps.

We have already integrated React in many of our online demos (for example: the Data Grid). Check them out, they allow direct code edits and you can copy the demos directly into an online IDE for further experiments! It will take us a while to update all demos, but we’re working on it continuously.

Configuration Components

To easily set up our widgets with their detailed options, using a React style code structure, we implemented configuration components. These are elements that are nested in JSX code as if they represented sub-elements of a widget, but technically they only carry the configuration data. This means that options can be supplied declaratively and selectively, with default fallbacks in place.

This Chart demo is a good example – with the exception of the outer Chart element, all others are configuration components!

Widget Markup Customization

Many DevExtreme Widgets can be customized, entirely or in part, by specifying templates. Some widgets have top-level template initialization properties, some others have properties with a Template suffix, such as itemTemplate. In both scenarios, widgets can be customized using one of two approaches in React.

The first option is to supply a rendering function. When the widget has a template or thingTemplate property, the React component accepts a render or thingRender property.

<Button
  render={() => <div>... custom markup ...</div> } ... />
...
<List itemRender={item => <i>Item: {item.text}</i>} ... />

The second option is to use a component. For this technique, the relevant properties are called component and thingComponent, respectively.

<Button component={myButtonComponent} ... />
...
<List itemComponent={myListItemComponent} ... />

IDE Integration

We provide TypeScript declarations for all DevExtreme React components. If you use TypeScript in your projects you can utilize these types directly in code. Whether or not you use TypeScript, your IDE – we have tested Visual Studio Code specifically – will be able to show you detailed tooltips and IntelliSense information about DevExtreme React components. This works even in basic JavaScript projects!

Test It Today

To use DevExtreme React components, please install these two packages using npm:

npm install --save devextreme devextreme-react

More information is available in this guide.

Please Let Us Hear Your Thoughts

Many of you have provided valuable feedback in the pre-release period. We are interested to hear your thoughts now the RTM is out! What do you think of DevExtreme React components? Please submit the following quick survey, and feel free to leave comments if there’s anything else we should know.

Free DevExpress Products - Get Your Copy Today