React

Kendo UI provides integration support for React.

To use any jQuery component in a React application, you’ll need a trial of the Kendo UI for jQuery library or a valid Kendo UI license.

KendoReact Suite

If you are looking for native React components (no jQuery dependency), please visit KendoReact. KendoReact a separate suite of 55+ native React components, from Grid and Charts to TimePicker, DatePicker and Menus.

To access the native components, you need to sign up for a KendoReact trial or purchase a KendoReact license.

At this time, most of the components in Kendo UI for jQuery can be found as native equivalents in KendoReact. However, there are still some that are not yet available and in those cases, you can utilize the jQuery equivalent in your React applications following the instructions below.

The KendoReact Roadmap page provides information about the development plans of the team with regard to new components and features.

Kendo UI for jQuery Suite In React Applications

The KendoReact suite is still growing and some of the components will be available in a later state of the product life cycle.

The Kendo UI for jQuery widgets can be used inside a React application by following these steps:

  1. Import the Kendo UI files or a single file if only one or two widgets will be used in order to reduce the bundle size:

        import '@progress/kendo-ui' // import the entire Kendo UI
        //or
        import '@progress/kendo-ui/js/kendo.scheduler.js'
    
  2. Add the DOM element that will be used to render the Kendo UI for jQuery widget.

        <div id="scheduler"></div>
    
  3. On the ComponentDidMount event initialize the widget with its options.

        componentDidMount(){
            this.kendoSchedulerInstance = $('#scheduler').kendoScheduler({
                ...Add options
            }).data('kendoScheduler')
        }
    
  4. The jQuery widgets are not automatically controlled by the changes in the state or the props. If the component has to be changed, the public API methods of the component can be utilized on the componentDidUpdate lifecycle method.

        componentDidUpdate(){
            let event = this.kendoSchedulerInstance.data()[0];
            this.kendoSchedulerInstance.select([event.uid]);
        }
    
  5. To prevent performance issues and memory leaks, destroy the widget on the componentWillUnmount lifecycle method.

        this.kendoSchedulerInstance.destroy()
        $('#scheduler').empty()
    

React Wrappers

For convenience, we created example wrapper packages of some of the components that can be used while we are developing a native React equivalent.

These packages will handle the creation, updating and destroying of the widgets and will provide a declarative approach of creating the components:

  1. Scheduler
  2. Spreadsheet
  3. TreeList
  4. PivotGrid

Scheduler

This is an example using the Scheduler wrapper.

Spreadsheet

This is an example using the Spreadsheet wrapper.

TreeList

This is an example using the TreeList wrapper.

PivotGrid

This is an example using the PivotGrid wrapper.

See Also

In this article
Not finding the help you need? Improve this article