New to KendoReact? Start a free 30-day trial

Using with Scripts

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

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

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>

If using KendoReact premium components, add your Script License key (for versions 4.8.0 and newer). If working with free KendoReact components and features, you can skip this step.

To download a license key for KendoReact, you must have either a commercial 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 and all KendoReact Free components DO NOT require script license key.

Load the KendoReact script files.

html

<script src="https://unpkg.com/@progress/kendo-react-all/dist/cdn/js/kendo-react-all.js"></script>

Load one of the KendoReact themes.

html

<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material/dist/all.css"></link>

Retrieve the desired component from the window object.
html
```
const Calendar = window.KendoReactAll.Calendar
```
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.

Using with Scripts

Suggested Links