What's New R3 2022

New React Theme: Microsoft Fluent Design System

With R3 2022, KendoReact (as well as all Telerik and Kendo UI web libraries) gets a major addition: a new theme! The new Fluent Theme follows the guidelines of the official Fluent Design System, and you can use it to style your KendoReact UI components just by including it in your project.

If you are already using Fluent-themed components in your web applications, any KendoReact component will now seamlessly fit in with the help of the new theme.

See the Fluent theme in any of our demos.

New ThemeBuilder and ThemeBuilder Pro for KendoReact

Meet the revamped KendoReact ThemeBuilder, the web application that enables developers to quickly customize and style KendoReact components! Built from the ground up to be twice as fast, the improved tool now also offers the ability to work on multiple projects and save them across sessions.

For your advanced customization needs, we’re also introducing ThemeBuilder Pro, an add-on you can purchase that makes atomic-level customizations a breeze.

Head over to the announcement blog post for a full breakdown of what’s new with the ThemeBuilder and what ThemeBuilder Pro includes.

New Component: React Signature

The new React Signature component makes it easy to capture and reuse signatures from users via a mouse or touch interface. This component comes in handy whenever you’re working on an application that requires the user to sign a document digitally—for example, financial documents or delivery receipts. Besides signature capturing and submission, you can take advantage of the optional line smoothing feature.

See React Signature Component demos.

All React Components: Support for the Latest Version of TypeScript

To ensure that we can operate within React 18 without any TypeScript errors, the time has come to update the version of TypeScript we use. With today’s release, we have now built the KendoReact components against the latest stable version of TypeScript (4.7.3) and we also use the latest `@types/react` version (18.0.13).

While we have updated the version of TypeScript that we use for the KendoReact components, we still support all React versions above 16.8.2.

See the KendoReact TypeScript support in any of our demos.

All React Components: Updated Design for API Docs

With 100+ React UI components, the KendoReact library has an extensive set of API documentation articles. As part of our effort to keep improving the developer experience our tools offer, the team has revamped the entire KendoReact API documentation. The new design of the API docs makes it easier to navigate and understand them, speeding up the onboarding and learning process with our UI library.

Example: See the KendoReact Data Grid API section

New React Visual Studio Code Productivity Tools

With this release, you get an extra productivity bonus! With the newly added snippets feature, the Kendo UI Productivity Tools for Visual Studio Code will save you a lot of time—and spare you the mild annoyance of manual copy-pasting—when you work with KendoReact components in VS Code.

All you need to do is type `kr-` in the IDE and you will see a popup listing all KendoReact components. As you start typing the name of the component you’re looking to implement, the list will get filtered. Alternatively, you can use the arrow keys to select the appropriate component. As you can expect, the tab key will automatically type out the entire component declaration.

Visit the Visual Studio Code Productivity Tools: React Snippets documentation

React PivotGrid Improvement: Export to Excel

Users can do many data operations within the React PivotGrid component itself. Occasionally, however, they may have to edit the data in a standalone spreadsheet instead of inside your React app.

To address this need, R3 2022 brings built-in export to Excel functionality in the KendoReact PivotGrid. When enabled, users can export the content of your React PivotGrid with a single click.

See React PivotGrid Export to Excel demo.

React PivotGrid Improvement: Export to PDF

In addition to Excel Export, R3 2022 brings Export to PDF functionality to the React PivotGrid. Now you can easily enable users to export the content of the KendoReact PivotGrid to a PDF file. You can take advantage of different options to configure the exported PDF file. One popular configuration many developers use is choosing whether only the current page or all content should be exported when a user attempts to export to PDF.

See the React PivotGrid Export to PDF demo.

React PivotGrid: Globalization Documentation Article

To help you build applications that meet the requirements of users from across the globe, we’ve added a new documentation article for the React PivotGrid component highlighting Globalization-specific items. Refer to it when using the PivotGrid with different culture formats and when you need additional information on how to localize built-in messages.

See the React PivotGrid Globalization article

React PivotGrid Improvement: Built-in Loading Indicator

The new built-in loading indicator will be displayed whenever the React PivotGrid loads local data, handling operations such as sorting, filtering or changing the fields displayed within the component.

The indicator relies on the KendoReact Loader component, which means that developers get many options for changing the look-and-feel of the loading indicator, including custom rendering.

See React PivotGrid Loading Indicator demos.

React PivotGrid Improvement: PivotGrid and Chart Integration

Displaying data visually using charts and data visualizations is a powerful way for end-users to understand more about the data they are working with. That’s why with R3 2022, the KendoReact team worked on a smooth integration between the React PivotGrid and React Charts available in the KendoReact UI library. You can see the result in the demos—for example, the Chart now automatically updates whenever data operations such as sorting or filtering are done in the Pivot Grid.

See React PivotGrid and Chart integration demos.

Various React Components: Accessibility Improvements and WCAG 2.1 Compliance

Accessibility compliance is an effort that is never 100% done. While the KendoReact UI library offers some of the best accessibility compliance in the React space, we keep working on improving it further. With this release, we’ve now updated the target WCAG version for compliance from 2.0 to WCAG 2.1, plus we’ve addressed other accessibility-related issues across various components.

See KendoReact Accessibility Overview.

Various React Components: Bug Fixes and Enhancements

The KendoReact team has been busy working on numerous enhancements and fixing bugs in a focused effort to ensure that this version of our React UI library is the most stable yet. You can get detailed information about all these changes by reviewing the KendoReact changelog.

See the KendoReact changelog.