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

ESSENTIAL STUDIO 2023 VOLUME 1

What’s New in Syncfusion React UI Components

With 2023 Volume 1, you can add more functionality to your React apps with a new Ribbon component, virtual scrolling in the File Manager, and undo and redo options in the Image Editor.

Common

New component

The Ribbon component has been added to React.

Preview to production-ready component

The Rating component has been developed to meet industry standards. It is now marked as a production-ready component for React.

Charts

Center label

It is now possible to place a label at the center of the pie and donut charts. Also, when the mouse pointer hovers over the pie slice, the relevant data is displayed at the center of the pie chart.

Center label

Range step area

Provided support for a new chart type called range step area which is used to display the difference between minimum and maximum values over a certain time period.

Range step area

Error bar customization

It is now possible to customize the height and color of the error bar of each data point.

Error bar customization

Circular Gauge

Right-to-left (RTL) support

The entire circular gauge, including the tooltip and legend, can now be rendered in the RTL direction, which is used in some cultures.

Right-to-left support of React Circular Gauge

Word Processor

Continuous section break

This feature allows users to display a new section on the same page. The continuous section break is often used to change the number of columns for a part of content without starting a new page.

Illustration of multiple sections and multiple columns in the Word Processor component.

Drag and drop selected content

This feature allows users to drag and drop the selected content within the Word Processor component. It helps the editor move the content from one place to another.

Illustrates dragging and dropping the selected content in the Word Processor component.

Show/hide bookmarks

Show or hide the start and end of bookmarks in the Word Processor component. It displays square brackets at the beginning and end of each bookmark.

Illustrates how the start and end marks of a bookmark is displayed in the Word Processor component.

Optimize SFDT file size

The SFDT file generated by the Word Processor component is now optimized to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits,

  • File transfer between client and server through the internet gets faster.
  • The new optimized SFDT files require less storage space than the old SFDT files.

This feature comes with a public API to switch between the old and new optimized SFDT format, allowing backward compatibility.

File Manager

Virtual scrolling

This feature provides UI virtualization support for both detailed and large-icon views in the React File Manager component. With this new feature, performance is improved on initial load while loading files and folders in the view port. The remaining files and folders will be loaded dynamically while the user scrolls. Users can load a large number of files and folders within the component without any performance issues. In addition, scrolling can be done with the keyboard as well.

In the detailed view, we have added mask support to indicate the progress of loading more files while scrolling.

React File Manager with virtualization

Gantt Chart

Drag and drop tasks between resources

Allows users to drag and drop tasks between different resources in the resource view of a gantt chart. Users can easily assign tasks from one resource to another by simply dragging and dropping them within the resource view.

Taskbar drag and drop in React Gantt Chart.

Grid

Search and filter with new operators

The new operator in the search and filter feature allows users to perform precise and targeted searches on their data. These operators provide greater flexibility and control over how users can search and filter data in React Grid.

  • does not contain - Allows users to search for items that do not include certain keywords or phrases.
  • is null and is not null - Allows users to search for items that do not include certain keywords or phrases.
  • is like and is not like - Allows users to search for items that match or do not match a specific pattern using wildcards.
  • does not start with and does not end with - Allows users to search for items that do not begin or end with a specific string of characters.

React Grid filtering with new filter operators.

Autofit columns with empty space

This feature is used to render columns in a grid based on the specified width defined in the columns declaration. It means white space will be displayed in the grid instead of columns auto adjusting to fill the entire grid width if the total columns’ width is less than the grid’s width.has context menu

React Grid autofit columns with empty space

Image Editor

Undo and redo support

This feature provides undo and redo support by storing every action as an object that contains rotations, flips, annotations, as well as freehand drawings in an array. The undo and redo actions are performed based on that array.

Pinch zoom

This feature provides support to zoom in or out of the image on a touch screen device, such as a smart phone or tablet, by using two fingers to pinch or expand the screen.

Mouse wheel zoom

This feature allows zooming in or out of the image using the mouse wheel and the “Ctrl” key.

Maps

Customization of the zoom toolbar

The appearance of the buttons and tooltips in the zoom toolbar can now be customized using built-in APIs.

Zoom toolbar of React Maps

Drag and drop support for markers

Markers inside the Map can now be dragged and dropped in the desired location based on the requirement. Events are also fired when the drag starts and ends.

Drag and drop support for markers of React Maps

Pivot Table

Role option in OLAP cube

The pivot table can be bound to a SSAS OLAP cube, giving end-users access to restricted cube information such as measures, dimensions, hierarchy, and more based on their assigned role.

Progress Bar

Secondary progress customization

Provided support to customize the width and color of the secondary progress bar.

Secondary progress customization

Tooltips

It is now possible to display tooltips during initial load of progress bars and mouse hover with numeric or text values of the progress.

Progress Bar - Tooltip

Ribbon (preview)

The React Ribbon component provides a structured and easy-to-use interface for users to access different features and functions, improving the overall user experience and making your application more efficient.

Key features

  • Built-in items: Several built-in support items, such as buttons, checkboxes, dropdown buttons, split buttons, combo boxes, and color pickers that can be customized and used to execute specific actions.
  • Modes: Offers the classic mode that organizes items and groups in a traditional form, and simplified mode that organizes items and groups into a single row for improved usability and reduced clutter.
  • Tooltip: Provide additional information when a user hovers over a ribbon item, improving user experience and increasing the usability of the application.
  • File menu: A built-in menu that to add file related actions easily.
  • Templates: Customize ribbon items and the help pane content using templates.

React Ribbon

Rich Text Editor

Enhanced toolbar tooltip appearance

The Rich Text Editor toolbar tooltips have been enhanced with improved appearances. These tooltips have been redesigned to more clearly display the keyboard shortcut information, making it easier for users to understand the functions of each toolbar item. Find the demo link here.

Rich text eidtor tooltip

Scheduler

XSS security option

Sanitize appointment inputs, improving the security of the Scheduler component.

Filter query

Utilize built-in filter support to filter events easily when requesting data from the server.

Timeline views without horizontal scroller

This feature allows users to see an overview of the schedule timeline without a horizontal scroller, improving the usability and accessibility of the Scheduler component.

React Scheduler without horizontal scroller.

Spanned events in timeline year view 

Render spanned events as a single event instead of separate events in the timeline year view of the Scheduler component.

React Scheduler multi-month event in timeline year view.

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