Essential Studio^® for React Release Notes

Common

Features

• Upgraded Sass to version 1.92.1.
• React components now automatically use the default currency code based on the active locale when no currency prop is provided.
• Added CSS variable support for typography customization.
• Added support for creating React applications using Pure React components in Visual Studio Code through the JavaScript Visual Studio Code extension.

Breaking Changes

• Renamed Material 3 theme file from material3 to material for consistent theme naming.

Calendar

The React Calendar component is a modern, accessible date browsing and selection UI. It supports Month, Year, and Decade views, single or multiple date selection, and rich keyboard navigation. With localization, RTL, min/max constraints, and customizable templates for header, footer, and cells, it fits everything from simple pickers to advanced scheduling user interfaces.

Explore the demo here

Key features

• Multiple Views: Switch between Month, Year, and Decade.
• Controlled or Uncontrolled: Manage value externally or via defaultValue.
• Single or Multiple Selection: Choose between single selection or multiple date selection using the multiSelect option.
• Min/Max Constraints: Clamp navigation and selection within allowed dates.
• Disable Past/Future: Quickly block past or future dates.
• Week Numbers: Optional display with customizable first-week rule.
• Weekday Formats: Short, Narrow, Abbreviated, or Wide headers.
• Show Outside Days: Optionally render adjacent month dates in Month view.
• Localization & Globalization: Locale-aware text, formatting, and right-to-left layout.
• Orientation: Vertical or Horizontal layouts.
• Toolbar & action button: One-click jump to today and optional top toolbar.
• Header/Footer/Cell Templates: Full templating control for branding and UX.

Chart

Features

• Annotation: Place any HTML element such as text, images, markers, or fully templated content at any data point or anywhere in the chart area.
• Error Bar: Visualize data variability and measurement uncertainty with fully customizable error margins. Supports percentage, standard deviation, or user-defined values for both positive and negative directions.
• Highlight & Selection: Emphasize or select data using Point, Series, and Cluster modes with customizable colors, opacity, and pattern styles.
• Crosshair & Crosshair Tooltip: Provides interactive reference lines that follow the cursor, along with axis-aligned tooltips for precise data inspection. This feature helps users accurately identify data points across multiple axes, improving readability and analysis in complex charts.
• Cross Axis (crossAt) Support: Position an axis at any custom value of another axis to create intersecting axes layouts.
• Series: Provides more than 10 series types, including financial, range, stacked, and multi-colored line series, with enhanced customization and support for advanced data visualization.

Breaking Changes

• The chart theme names have changed: Material3 has been renamed to Material, and Material3Dark has been renamed to MaterialDark.

Data Grid

Features

• Added Command column line editing support, enabling CRUD actions directly through action buttons in the grid.
• Introduced Popup editing and customizable Popup template editing, allowing CRUD operations within internal or external forms.
• Enabled filter bar operator popup support, letting users select and apply different operators based on their needs.
• Added Checkbox selection, making it possible to select multiple rows efficiently using checkboxes.

DatePicker

The React DatePicker component is a compact, accessible date input that combines a text box with a popup Calendar. It supports precise date formatting and parsing, min/max constraints, single-date selection, and full keyboard navigation. With localization, RTL, and templating options, it fits everything from simple forms to enterprise-grade workflows.

Explore the demo here

Key features

• Popup Calendar: Open/close a calendar overlay for quick selection.
• Clear & Toggle Icons: Built-in icons to open the picker and clear the value.
• Controlled/Uncontrolled: Use value or defaultValue to manage state.
• Min/Max Limits: Restrict input and calendar navigation to valid ranges.
• Custom Formats: Display and parse dates with custom format strings.
• Validation States: Built-in invalid, disabled, and read-only modes.
• Localization & Globalization: Locale-aware formatting with right-to-left support.
• Templating: Customize the calendar header, footer, and cells for branding.

Dropdown List

The React Dropdown List component is a compact, accessible single-select input that combines a text box with a popup list. It supports fast data binding, search and filtering, grouping, and full keyboard navigation. With localization, RTL, and rich templating, it fits everything from simple forms to enterprise dashboards.

Explore the demo here

Key features

• Popup List: Open/close an options overlay for quick selection.
• Search & Filtering: Type-to-search with built-in filtering for large lists.
• Controlled/Uncontrolled: Use value or defaultValue to manage state.
• Data Binding: Bind arrays or remote data with fields mapping.
• Grouping & Sorting: Organize options with group headers and ordered lists.
• Custom Templates: Customize items, value display, and headers/footers.
• Localization & RTL: Locale-aware text with right-to-left support.
• Keyboard & Accessibility: Arrow navigation, Enter select, and ARIA-compliant behavior.

Pie Chart

The Pie Chart component represents data as proportional slices of a circle, making it ideal for visualizing part-to-whole relationships. Each slice corresponds to a data point, with its size determined by its value relative to the total. Built using Scalable Vector Graphics (SVG), it ensures crisp rendering and smooth animations across devices. The component offers extensive customization options, including slice colors, labels, legends, and interactive features such as tooltips, selection, and explode-on-click. Designed for modern React applications, it is perfect for dashboards and reports where clarity and aesthetics are essential.

Key features

• Pie and Donut Variants: Supports full pie, semi-pie, and donut charts for flexible data visualization.
• Legend: Displays legends to provide additional context for slices, with support for paging and customization.
• Data Labels: Supports inside or outside positioning with smart collision avoidance and connector lines, enabling clear annotation and highlighting of data points.
• Rich Interactivity: Includes tooltips, clickable legends, and smooth animations to enhance user engagement.
• Animation Support: Delivers visually appealing transitions and effects that improve data storytelling.
• Accessibility & Navigation: Provides keyboard navigation and screen reader support for inclusive experiences.
• Customization Options: Fine-grained control over slice colors, stroke, inner radius, start/end angles, and explode behavior for tailored chart designs.

Scheduler

The Syncfusion React Scheduler component is a flexible, configurable, and high-performance event calendar component. It is designed to be highly customizable and extensible, offering a comprehensive feature set that addresses a wide range of scheduling needs. With day, week, work week, and month views, customizable templates, robust event management (CRUD, drag-and-drop, resizing), data binding, globalization and accessibility, the Scheduler integrates seamlessly and delivers an optimal experience on both desktop and mobile devices.

Key Features

• Views: Day, Week, Work Week, and Month views with per-view configuration (Week is default).
• Data binding: Seamless data binding with local arrays/objects and remote APIs with custom field mappings.
• Customization: The key elements like events, date header, work cells come with the default template support which allows the flexible end-user customization to embed any kind of text, images, or styles to it.
• Working days and hours: Configurable visible/working hours (highlighted) and working/non-working days.
• Responsiveness: Adapts with optimal user interfaces for mobile and desktop form-factors, thus helping the user’s application to scale elegantly across all the form-factors without any additional effort.
• Event interactions: Built-in CRUD via editor dialog and quick pop-ups.
• Drag-and-drop and resizing: Easy rescheduling and duration adjustments.
• Accessibility: ARIA support and full keyboard navigation.
• Localization: All the static text and date content can be localized to any desired language. Also, it can be displayed with appropriate time mode and date-format as per the localized language.
• RTL: Supports displaying the component to display in the direction from right to left.

Spinner

The React Spinner component is a lightweight, accessible loading indicator with multiple animated styles. It supports sizing, overlay mode, and customizable content, making it ideal for indicating progress across pages or specific UI sections.

Explore the demo here

Key features

• Multiple Styles: Circular, Cupertino, SingleCircle, and DoubleCircle animations.
• Overlay Mode: Fullscreen overlay option to block UI during loading.
• Theming Colors: Built-in color variants: Primary, Secondary, Success, Warning, Error, and Info.
• Custom Size & Thickness: Set size (px/em) and stroke thickness for precise visuals.
• Configurable Speed: Control animation duration (ms/s) for rotation and dash effects.
• Accessible by Default: role="status" with aria-live="polite" and optional label text.
• Slot for Custom Content: Provide custom children to replace the default SVG.
• Performance Optimized: Memoized SVG rendering for smooth animations.

TimePicker

The React TimePicker component is a compact, accessible time input that combines a text box with a popup time list. It supports precise time formatting and parsing, min/max constraints, step intervals, and full keyboard navigation. With localization, RTL, and templating options, it fits everything from simple forms to enterprise-grade workflows.

Explore the demo here

Key features

• Popup Time List: Open/close a time options overlay for quick selection.
• Clear & Toggle Icons: Built-in icons to open the picker and clear the value.
• Controlled/Uncontrolled: Use value or defaultValue to manage state.
• Min/Max Limits: Restrict input and time navigation to valid ranges.
• Custom Formats: Display and parse times with custom format strings (12/24-hour).
• Validation States: Built-in invalid, disabled, and read-only modes.
• Localization & Globalization: Locale-aware formatting with right-to-left support.
• Templating: Customize the popup list and time items for branding.