We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
What’s New in Syncfusion React UI Components


What’s New in Syncfusion React UI Components

New Circular 3D Charts, Timeline, and Text Area components; compatibility with the Preact framework; and advanced querying types for Query Builder make the 2024 Volume 1 release a must-have for React developers.


Preact support

Syncfusion React components are now compatible with the Preact framework.

New components

The following components have been added for React:

  • 3D Circular Charts
  • Text Area
  • Timeline

Next.js sample browser

A Next.js sample browser has been implemented to demonstrate the seamless compatibility and easy integration of Syncfusion React components with Next.js applications. Explore the Syncfusion Next.js demos here.

Preview to production-ready components

The following components have been developed to meet industry standards. They are now marked as production-ready components for React:

  • Ribbon
  • Stepper

3D Circular Charts (preview)

The React 3D Circular Charts provide a graphical representation of data in three dimensions, with each slice’s size indicating its proportion relative to the entire dataset. Unlike traditional 2D charts, 3D charts add depth to visualization, providing a better understanding of data patterns.

Key features

  • Series: The 3D Circular Charts can plot pie and donut types.
  • Data binding: Bind the 3D Circular Charts component with an array of JSON objects or a data manager. In addition to chart series, data labels and tooltips can also be bound to the data.
  • Data labels: Annotate points with labels to improve the readability of data.
  • Legends: Provide additional information about points in a customizable and interactive legend.
  • User interaction: Add interactive features such as tooltips, rotation, tilt, data point highlight and selection.
  • Print and Export: Print a 3D Circular Chart directly from the browser and export it in JPEG and PNG formats.
  • RTL: The right-to-left mode aligns tooltips, legends, and data in the 3D Circular Charts component from right to left.

React 3D Circular Charts

TextArea (Preview)

The React TextArea is a fundamental input element in web development that allows users to input multiple lines of text within a designated area, such as comments, messages, or other lengthy content. This control is an extended version of the HTML text area element, featuring clear icons, a floating label, various sizing options, validation states, and more.

React TextArea

Timeline (preview)

The React Timeline component enables users to display a series of data in chronological order, providing a visually compelling and user-friendly experience. This showcases user activities, tracking progress, narrating historical timelines, and more.

Key features

  • Orientation: Display items in a horizontal or vertical orientation.
  • Opposite content: Display additional information opposite to the item content.
  • Items alignment: Items’ content and opposite content can be aligned: before, after, alternate, or alternate reverse.
  • Reverse timeline: Shows the timeline items in the reverse order.
  • Templates: Customize the default appearance, including styling the dot item, templated content, and more.

React Timeline


Strip line dash array

This feature lets users specify the dash array for all types of strip lines’ border, including vertical, horizontal, and segmented, in the chart.

React Stripline Dash Array

Word Processor

Collaborative editing(Preview to production)

Allows multiple users to work on the same document simultaneously. This can be done in real time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes.

Illustration of collaborative editing in the React Word Processor component.

DOTX export

The Word Processor now supports saving the document as a Word Template (DOTX). DOTX files are template files used in Microsoft Word to create documents with predefined formatting and styles. They serve as valuable tools for maintaining consistency, efficiency, and branding in document creation. They provide users with a standardized framework for creating professional-looking documents while saving time and effort in the process.

Illustration of DOTX export in the React Word Processor component.

Color Picker customization

The color picker used in the Word Processor can now be customized to its default appearance or palette mode, or it can show a mode switcher between the picker and palette.

Illustration of color picker customization in the React Word Processor component.


The mention feature allows users to mention others using ‘@’, enabling them to easily collaborate, enhance communication, effectively draw attention, seek input, and acknowledge contributors.

Illustration of mention in the React Word Processor component.

Comments enhancement

The comment resolved state has undergone enhancements aimed at improving user interaction and comprehension within the interface. These improvements entail the implementation of visual markers that signify the resolution status of comments.

Illustration of comments resolved in the React Word Processor component.

Change case

The change case functionality allows users to quickly change the capitalization of the selected text without having to retype it. This feature is particularly useful for conforming text to specific style requirements.

  • Sentence case: Capitalizes the first letter of the selected text and converts the rest of the text to lowercase.
  • Lowercase: Converts all letters in the selected text to lowercase.
  • Capitalize each word: Capitalizes the first letter of each word in the selected text.
  • Toggle case: Toggles the capitalization of each letter in the selected text. Uppercase letters become lowercase, and lowercase letters become uppercase.

Illustration of change case in the React Word Processor component.

The Word Processor component now supports navigating the document using headings. If heading styles are applied to the document, those headings will appear in the navigation pane.

Illustration of navigate headings in the React Word Processor component.

Value as object binding

When AutoComplete, ComboBox, DropDown List, and MultiSelect Dropdown components are bound to a dataset of objects, their values will be objects of the same type.

File Manager

Custom sorting

Custom sorting support is provided in File Manager. This feature allows users to override the standard sorting mechanism, tailoring it to suit specific application requirements.

Custom sorting in React File Manager.

Gantt Chart

Undo and redo support

Users can easily revert or reapply changes made to the Gantt Chart. This feature will track changes in task scheduling, resource allocation, and other modifications, allowing a quick correction of mistakes and refinement of project plans. Find the demo link here.

Undo and redo support in React Gantt Chart.

Multi-taskbars in project view

Provided support to visualize multiple child tasks within parent rows, even when records are collapsed, streamlining navigation and enhancing project understanding. Find the demo link here.

Multi-taskbars in React Gantt Chart.

Template support in PDF export

Enhanced the PDF exporting feature to support various templates, including header, taskbar, and label templates for left and right labels. This enhancement will enable users to customize the appearance and layout of the exported PDF.

Template support for PDF export in React Gantt Chart.


Spanning rows and columns with frozen rows and columns

This feature helps users to horizontally merge adjacent cells (column spanning) and extend this merging capability across multiple rows (row spanning) even when the frozen rows and columns feature is enabled in the grid. This enables the creation of a visually appealing and informative layout. Find the demo link for column spanning and row spanning with frozen rows and columns.

Spanning rows and columns with frozen rows and columns in React Grid.

Enhancements in infinite scrolling functionality

Along with the traditional infinite scrolling feature, the new enhancements include compatibility with row drag and drop and column virtualization. Find the demo link here.

Row drag and drop with infinite scrolling of React Grid.

Show add new row

The grid content always presents an empty “Add New Row” edit form during initialization, simplifying the process of adding a new record. Additionally, users can display the “Add New Row” at the top or bottom of the grid. After completing the form, press enter to add the record, facilitating a seamless process to add successive records. Find the demo link here.

Show add new row in React Grid.


Tooltip support for polygons

Tooltips and tooltip templates can be displayed for polygon shapes. Tooltip templates can include custom items such as images, text, and HTML elements.

Tooltip template for polygon shapes in React Maps.

MultiSelect Dropdown

Virtual scrolling

The virtual scrolling support for the MultiSelect Dropdown enables users to navigate large lists of options efficiently without the need to load all the items at once. This feature enhances the user experience for applications with long lists of options.

React MultiSelect Dropdown virtual scrolling

PDF Viewer

Organize pages

We are excited to unveil the latest enhancement to our PDF Viewer: the Organize Pages feature. Now, managing PDF documents is easier and more intuitive than ever before. Here’s what this powerful new feature can do:

  • Rotate pages: Need to adjust the orientation of a page? No problem! With this, you can rotate pages clockwise and counter-clockwise with just a few clicks, ensuring your document looks exactly the way you want.

  • Insert new pages: Seamlessly integrate additional content into your PDF document by adding new pages wherever needed. Whether it is adding a new section or including supplementary material, inserting pages has never been easier.

  • Delete pages: Streamline the document management process by removing unnecessary pages easily. Select the pages to be deleted, and with a click, they are gone, helping you keep PDFs tidy and organized.

Organize pages

Customize context menus

Users can personalize the context menus on PDF pages, annotations, and form fields. This feature allows users to add new menus above or below the existing ones, while also providing the option to hide default menus.

Customize context menu

Pivot Table

Single-page mode

This support allows the pivot table to render only the rows and columns that are relevant to the current view page when virtual scrolling is enabled. This optimization significantly improves the performance of the pivot table during initial rendering and when performing UI actions such as drilling up/down, sorting, filtering, and more.

Single page mode in React Pivot Table.

Value sorting (OLAP)

Enables users to sort individual measures and their aggregated values in the OLAP cube linked pivot table in ascending and descending order. It can be performed through code-behind or UI action by directly clicking the value header present on the pivot table’s row or column axis.

Value sorting for OLAP cube in React Pivot Table.

Query Builder

Advanced query types

To improve the query functionality, the Query Builder has been expanded to accommodate query types, including Mongo, parameterized SQL, and named parameter SQL. Users can seamlessly import these queries into the Query Builder for enhanced versatility.

Lock support

The lock option is available for rules as well as groups. When a rule is locked, the field, operator, and value will be disabled. When a group is locked, all the elements within the group will be disabled.

Lock support in React Query Builder.

Clone support

The clone option is available for rules and groups. It will create an exact replica of a rule or group next to the original.

Clone support in React Query Builder.


In addition to the existing built-in items, a new item, gallery, has been added to the Ribbon component. It allows users to perform specific actions by displaying a collection of related items, including icons, content, or images.

React Ribbon gallery

Contextual tabs

This feature allows users to display the ribbon tabs on demand based on their needs. Similar to the normal ribbon tabs, it supports adding all built-in and custom ribbon items to execute specific actions.

React Ribbon contextual tabs

KeyTips support

This feature enables users to quickly access the tabs or ribbon items by using defined unique key tips (up to 3 characters). To show the KeyTips, press Alt + Windows/Command keys, and close or traverse back by pressing the Esc key.

React Ribbon keytips


Culture-based argument separator

The Spreadsheet now recognizes the culture-based argument separator in the formula. For example, Excel files use semicolons (‘;’) as argument separators for formulas instead of commas (‘,’) in the German culture.

Culture-based formatted numeric

Now, Spreadsheet allows users to pass numeric values with culture-based decimal separators as arguments to formulas.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon