KendoReact UI Component Library

KendoReact Date Inputs is a collection of customizable, responsive, and interactive UI components designed for selecting dates and times. Users can interact with these components by typing values directly, using keyboard arrow buttons, or selecting from popup calendars.

Key Features

• Customizable Appearance: Supports built-in themes, theme customization, custom themes via ThemeBuilder, and an unstyled mode.
• State Management: Includes built-in disabled and readOnly modes via component properties.
• Form Integration: Native implementation for form validation.
• Formatting: Supports predefined and custom date and time formats.
• Accessibility: Out-of-the-box accessibility and keyboard navigation.
• Globalization: Support for international date and time standards.

The SvgIcon component is used to display SVG icons and provides access to over 500 icon options. It is part of the [KendoReact Common Utilities] package.

Important Compatibility Note: Kendo UI Icons version ^5.x.x requires KendoReact v15.0.0 or later.

Key Capabilities:

• Appearance: Use predefined styling options for quick styling.
• Unstyled Mode: Remove default visual effects to apply custom application designs.
• Custom SVG Icons: Render your own custom SVG icons within the component.

To use SvgIcon, you must follow the installation and import procedures for the KendoReact Common Utilities package.

The KendoReact StockChart is a specialized component designed for visualizing the price movement of financial instruments over specific time periods. It extends the standard [KendoReact Chart] component, inheriting most of its features while adding specialized financial visualization capabilities.

Key characteristics include:

• Navigator Pane: Allows users to change the date interval of the main panes for easier browsing of extended time periods.
• Financial Focus: Optimized for time-series data typical of financial markets.
• Extensibility: Supports all configuration options available to the standard KendoReact Chart.

The KendoReact SegmentedControl is a component used to display a horizontal set of mutually exclusive buttons. It allows users to select a single option from a group, making it suitable for switching between views, modes, or filter states.

It is distributed via the @progress/kendo-react-buttons NPM package.

The KendoReact ColorPicker is a component used to select and submit color values. It serves as a robust, cross-browser alternative to the standard HTML5 <input type="color"> tag, which lacks consistent support across different browsers.

Key capabilities include:

• Controlled Mode: Manage the color value via React state.
• Views: Configure the UI to display a color gradient, a color palette, or both.
• Customization: Adjust the appearance of the palette and gradient popups.
• Keyboard Navigation: Full support for keyboard shortcuts to enhance accessibility.
• State Management: Support for disabled states and initial default values.

The KendoReact Indicators package provides native React components designed to visually indicate current status, ongoing processes, or state changes. These components are built specifically for the React ecosystem and are distributed via npm.

Key Features

• Customizable Appearance: Adjust color, form, and dimensions using built-in options, themes, or custom themes. Supports an unstyled mode for complete control.
• Globalization: Supports right-to-left (RTL) layouts and other globalization requirements.
• No License Required: All components in the Indicators package are free to use without a commercial license or registration.

The KendoReact Toolbar is a graphical container designed to hold button elements, allowing users to structure and access tools efficiently.

Key capabilities include:

• Tools: Support for various button types to create a selection of tools.
• Adaptive Rendering: Options to handle overflow by hiding tools that do not fit the container width or by rendering scroll arrows.
• Globalization: Built-in support for internationalization and Right-to-Left (RTL) layouts.
• Keyboard Navigation: Support for various keyboard shortcuts for efficient access.
• Accessibility: Built-in WAI-ARIA attribute support for screen readers.

The KendoReact Chart Wizard is a tool designed to help you visualize data by creating charts from a Grid, other data-bound components, or external data sources. It provides a guided interface to configure essential chart elements including:

• Chart Type: Select the visual representation (e.g., Bar, Line, Pie).
• Series: Define the data series to be plotted.
• Axes: Configure both Category and Value axes.
• Legend & Area: Customize how data is identified and the chart area.
• Title: Set the chart's heading.
• Data Source: Bind the chart to your specific data collection.

To use it in your project, install the @progress/kendo-react-chart-wizard NPM package.

npm install @progress/kendo-react-chart-wizard

The KendoReact TextBox component is a versatile input component used for creating composite inputs. It can be used as a standalone element or integrated into forms.

Key capabilities include:

• Customization: Use prefix and suffix props to provide custom components for advanced input scenarios.
• Forms Integration: Works with the KendoReact Form component for input validation and preventing invalid form submissions.
• Floating Labels: Supports floating label functionality for enhanced UI.
• Disabled State: Can be configured to prevent user interaction.
• Appearance Control: Allows setting dimensions and styles via appearance configuration.

/* The documentation provides an embedded example of the TextBox in action. */

The KendoReact TimePicker is a component used to represent a time-list where users can either enter or pick time values via a dropdown or direct input. It is part of the [KendoReact Date Inputs] component library.

Key Capabilities:

• Selection Modes: Supports both uncontrolled and controlled modes (managing value and popup visibility via React state).
• Constraints: Allows setting time limits (predefined ranges), incremental steps for increasing/decreasing values, and default values.
• Customization: Supports custom rendering of child components, custom time formats, and placeholders.
• Integration: Works with KendoReact Form for validation and supports binding to JSON-serialized date strings.
• Accessibility & UX: Includes keyboard navigation, WAI-ARIA support for screen readers, and globalization features.

The KendoReact Sortable component is designed to provide smooth drag-and-drop interactions within lists. Its core capabilities include:

• Customizable Items: Support for rendering custom, disabled, or empty items within the sortable list.
• Nested Items: Ability to nest additional Sortable components and focusable elements inside list items for complex hierarchical structures.
• Globalization: Built-in support for different languages and locales.
• Keyboard Navigation: Support for keyboard shortcuts to allow users to perform sorting actions without a mouse.