What's New: Ignite UI for React 24.1 Release

Radoslav Mirchev / Thursday, August 8, 2024

We are excited to share that Ignite UI for React has received tons of significant improvements, introducing new features that enhance functionality and performance as part of our continuous release. Some of the key updates include several components like Hierarchical Grid, Button Group, a few gauges for better data visualizations, and more. All of these are tailored to help developers create high-quality, responsive web applications with ease. But let’s explore them in detail.

Version 18.4

 State Persistence feature for Grid component

 The Ignite UI for React State Persistence in React Data Grid, React Tree Grid and React Hierarchical Grid allows developers to easily save and restore the grid state. When the IgrGridState is applied on the React IgrGrid, it exposes the GetStateGetStateAsStringApplyState and ApplyStateFromString methods that developers can use to achieve state persistence in any scenario. The supported features are:

Example of React Grid State Persistence feature

Version 18.5

 Chart Highlight filter feature

 The Ignite UI for React Chart components support a data highlighting overlay that can enhance the visualization of the series plotted in those charts by allowing you to view a subset of the data plotted. When enabled, this will highlight a subset of data while showing the total set with a reduced opacity in the case of column and area series types, and a dashed line in the case of line series types. This can help you to visualize things like target values versus actual values with your data set. This feature is demonstrated in the following example:

Example of React Chart Highlight filter feature

Version 18.6

 New Hierarchical Grid component

 The Ignite UI for React Hierarchical Data Grid is used to display and manipulate hierarchical tabular data. Quickly bind your data with very little code or use a variety of events to customize different behaviors. This component provides a rich set of features like data selection, excel style filtering, sorting, paging, templating, column moving, column pinning, export to Excel and CSV, and more. The Hierarchical Grid builds upon the Flat Grid Component and extends its functionality by allowing the users to expand or collapse the rows of the parent grid, revealing corresponding child grids, when more detailed information is needed.

Example of React Hierarchical Data Grid Component

 New Radial Gauge

 The React radial gauge component provides a number of visual elements, like a needle, tick marks, ranges, and labels, in order to create a predefined shape and scale. The IgrRadialGauge also has built-in support for animated transitions. This animation is easily customizable by setting the transitionDuration property.

Example of React Radial Guage

 New Linear Gauge

 The Ignite UI for React linear gauge component allows for visualizing data in the form of a linear gauge. The IgrLinearGauge provides a simple and concise view of a value compared against a scale and one or more ranges. It supports one scale, one set of tick marks and one set of labels. The component has also a built-in support for animated transitions. This animation is easily customizable by setting the transitionDuration property. The features of the linear gauge component include configurable orientation and direction, configurable visual elements such as the needle, and more.

Example of React Linear Gauge

 New Bullet Graph Gauge

 The React bullet graph component allows for a linear and concise view of measures compared against a scale.

The Ignite UI for React bullet graph component provides you with the ability to create attractive data presentations, replacing meters and gauges that are used on dashboards with simple yet straightforward and clear bar charts. A bullet graph is one of the most effective and efficient ways to present progress towards goals, good/better/best ranges, or compare multiple measurements in as little horizontal or vertical space as possible.

Example of React Bullet Graph Gauge

 New Text Area component

 The Ignite UI for React Text Area component represents a multi-line plain-text editing control. It is useful when you want to allow users to enter a sizeable amount of free-form text, such as a comment on a review or feedback form.

Example of React Text Area Component

 New Button Group component

 The React Button Group component is used to organize IgrToggleButtons into styled button groups with horizontal/vertical alignment, single/multiple selection, and toggling.

Example of React Button Group Component

To Wrap It All Up...

 Seamlessly crafted for compatibility, Ignite UI for Angular is the library that enables you to leverage the power of the latest technologies and major releases. Committed to providing you with the best Angular UI toolkit and related insights, our goal is to equip you with more know-how, new features, enhanced performance, and improved stability. Some of the enhancements were added thanks to the requests from users like yourself through our Ignite UI for React GitHub repository. With this in mind, we are always open to suggestions and feedback – it makes us grow and better respond to your development needs.

If you need more details, we encourage you to check out our:

In Addition

 Follow Ignite UI on Medium to stay up to date and learn about the latest Angular-related projects we are working on. Give us a star on GitHub and help us continue improving our product by addressing any concerns, questions, or feature requests in the issues section.

Ignite UI for React