New to KendoReactStart a free 30-day trial

Using with Scripts

You can use KendoReact components in React applications by loading them directly from script files.

  1. Follow the steps from the described approach in the official React documentation.

  2. Load the common scripts that are used by the KendoReact components including prop-types, kendo-drawing, and kendo-licensing.

    html
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
    <script src="https://unpkg.com/@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
    <script src="https://unpkg.com/@progress/kendo-licensing/dist/index.js"></script>
  3. Add your Script License key (for versions 4.8.0 and newer).

    To download a license key for KendoReact, you must have either a developer license or a trial license. If you are new to KendoReact, sign up for a free trial first and then follow the steps below.

    1. Go to the License Keys page in your Telerik account.

    2. On the Progress® KendoReact row, click the Download key link in the LICENSE KEY column.

All KendoReact components before version 4.0.0 DO NOT require script license key.

  1. Load the KendoReact script files.

    html
    <script src="https://unpkg.com/@progress/kendo-react-all/dist/cdn/js/kendo-react-all.js"></script>
  2. Load one of the KendoReact themes.

    html
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material/dist/all.css"></link>
  3. Retrieve the desired component from the window object.

    html
    const Calendar = window.KendoReactAll.Calendar
  4. Render the component on the page.

    html
    <Calendar/>

The following example demonstrates the implementation of the described approach with JSX.

The following example demonstrates the implementation of the described approach when using the React.CreateElement.

In this article
Suggested Links
Not finding the help you need?
Contact Support