What's New R2 2022

New Component: React TaskBoard

The new React TaskBoard component gives developers the ability to create a column-based interface with cards, which the user can drag and drop between columns. A common use case for such a component is to create a Kanban board, like those found in GitHub issue boards or services like Trello.

With the KendoReact TaskBoard component, developers add a similar user experience to their app with just a few lines of code.

See the React TaskBoard component demo.

New Component: React Map (Beta)

With R2 2022, you can take advantage of a new React Map component added to our library! It won’t come as a surprise that the main purpose of this component is to add a map element to your React applications.

You can bind the KendoReact Map to a few map providers, Azure Maps for example, or to GeoJSON files to help represent maps without having to bind to an official provider. Additionally, the React Map component has the concept of layers available right out of the box, which means you can add markers and additional information overlayed on top of your base layer.

See the React Map component demo.

React 18 Support

React 18 was released in late March 2022, and we’ve made sure that KendoReact is compatible with the latest version of the framework! To update to React 18, all you need to do is update your references to the latest version and you shouldn’t see any warnings.

If you’re curious what’s in this new version of React, we previously wrote about what’s coming with React 18 in this blog.

See any KendoReact demo for examples using React 18.

Dark Mode for React Docs & Demos

Another exciting update across several products: you now can toggle between light and dark modes within our product documentation and demos!

When navigating through any of our web-based UI component library resources, you will see a toggle switch in the top-right corner of your screen. Use it to switch between dark and light mode.

See the React Dark Mode in docs and demos

New Ocean Blue Swatch for React Aimed at Better Accessibility

The Telerik and Kendo UI teams carried out a research project to find ways we could improve the accessibility of all our components by making changes to the look-and-feel of the Telerik and Kendo UI Default Theme. They looked for ways of improving accessibility by focusing on important aspects such as color and contrast.

This research effort led to the new Ocean Blue Swatch for the Kendo UI Default theme. Rather than the traditional orange color of the Default Theme, the aptly-called Ocean Blue swatch uses blue as the primary color. The goal for this swatch is to give Kendo UI users (and, by extension, KendoReact users) an immediate boost in accessibility compliance. While the Telerik and Kendo UI components already adhere to a high level of compliance, using this swatch will take you to the next level.

If you’re not familiar with the concept of a “swatch” for the Kendo UI themes, these are predefined and curated color combinations that our design and user experience teams have collaborated on to offer variations in the look-and-feel of our various themes.

See the Improved Accessibility of the Default theme.

Multiple Components: 27+ Improvements Based on Customer Feedback

A priority for the KendoReact team in 2022 will be to add much-requested features and address improvement suggestions for existing React UI components. As part of this, the team has been able to address over 27 improvements and features to existing components since our last release. Visit the KendoReact changelog for a complete list of everything that has been added with this update.

React Data Grid Improvement: Updated Drag and Drop

New behind-the-scenes improvements improve the drag and drop experience in our React Data Grid by adding the following functionality:

• Dragging multiple rows at the same time
• Auto-scroll on drag, which naturally scrolls the Table when your dragged rows reach the end of the visible area

All you need to do to take advantage of this update is to download the latest version of the KendoReact Data Grid.

See the React Data Grid Multiple Rows drag and drop demo.

React Editor Improvement: Table Resizing

The KendoReact Rich Text Editor has supported tables since the early days of the component, and with this update we’re expanding table support by allowing end-users to resize the table using built-in drag handles. These appear when a user clicks within the table and give users the ability to resize the height and/or width of the table element within the React Editor content area.

See the React Editor Table Resizing demo

New Create KendoReact App Tool

To make bootstrapping your React projects using KendoReact even easier, we‘ve created a new tool called Create KendoReact App. Built on top of Create React App, this tool will guide you through setting up a new project using KendoReact and will create an application that can use any of the examples our docs and demos contain without additional configuration.

Create KendoReact App comes with four templates to create projects using KendoReact with:

• Vanilla JS and CSS
• Vanilla JS and Sass
• TypeScript and CSS
• TypeScript and Sass

Our goal with these templates is to help new and existing customers alike get up and running with KendoReact even faster when starting a new project. Feel free to take this for a spin and let us know what you think!

See the Create KendoReact App Tool.

All Components: Updated Getting Started Pages

In an effort to make our documentation even more developer-friendly and achieve consistency across the documentation pages of all Kendo UI flavors, the KendoReact team has reviewed and updated all Getting Started articles for each individual component and package. React developers can now benefit from getting started pages that are easier to follow and get productive with the library even faster.

See the KendoReact Data Grid getting started page for an example.