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>
-
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.
-
Go to the License Keys page in your Telerik account.
-
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.
-
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.htmlconst 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
.