Telerik blogs

With the official release of KendoReact 4.0 today, Oct 22, we are announcing a new change happening in KendoReact: the introduction of license keys.

What Is Changing?

With KendoReact 4.0, we are adding a requirement to enter a license key when adding any KendoReact npm package to your applications. There are two ways to get a license key: by registering for a free trial or by purchasing a license.

Whenever a KendoReact npm package (v4.0+) is added to a React project, developers will see a warning message in the browser developer console that a license key is required. This message will link directly to the My License page with instructions for how to acquire and install the license, which will remove the warning from the developer console.

Getting access to your license key is seamless and activating it is as simple as running a single command in your CLI. We will dive into what this looks like in the “How To Use Your License Key” section below.

Why License Keys?

KendoReact serves its packages through npm to make it easy and intuitive for React developers to add KendoReact to any project. We recognize that npm is the standard for adding packages into modern web applications. One limitation of this setup is that a commercial library such as KendoReact does not have any tooling to assist with trials or licensed users.

In order to continue to offer KendoReact on npm and sustain our development efforts and ambitious long-term plans for the library, we came to the conclusion that adding license keys will give the team a way to manage trial and licensed usage while being largely hassle-free for our users.

Does This Affect Me Today?

This will affect any user who works with KendoReact 4.0 and beyond. So, if you already have KendoReact in your projects, you will only see this message when you upgrade to 4.0.

Ultimately, this will be something that affects all KendoReact users, no matter if they are a trial user or a licensed developer.

How to Use My License Key

If you only take with you one thing from this blog post, it should be the Set Up your KendoReact License Key page. This page has the full details around how work with this new setup. Specifically, it covers:

  • How to get access to your license key
  • How to install or update the license key in your projects
  • How to register the license key

How to Access My License Key

The abovementioned informational page has a “Download Your License Key” section. Sign in with your Telerik account and look for the button labeled kendo-ui-license.txt which you should download. You need an active KendoReact trial or developer license to be issued a license key.

Install or Update My License Key

Whether this is your first time starting a KendoReact trial, you are looking to upgrade from a trial license to a developer license, or you are a licensed developer updating to KendoReact 4.0 the process is the same.

  1. Copy the license key file (kendo-ui-license.txt) to the root folder of your project.
  2. Install @progress/kendo-licensing as a project dependency by running npm install --save @progress/kendo-licensing.
  3. Run npx kendo-ui-license activate in the console.
  4. Add the license file to source control to enable automatic activation, for example, in automated builds.

And that’s really it! It should be as easy as running a single command, and once you have the license file up and running, you can use it on development, staging, and production environments.

If you are a trial user who’s already added a license key and then purchased a license, you’ll have to download a new license key after your purchase from the My License page and follow the same instructions to associate your developer license with your KendoReact implementation.

If you are a renewing customer who used a license key previously and then updated your KendoReact packages, you may see a message mentioning that the package is not a part of your license. If this is the case, you simply have to get a new license key (associated with your renewal purchase) and add the license key following the same instructions.

KendoReact License Keys in Practice

With all of the above information out of the way let’s see what this all looks like by adding in a component to a new React app.

So, in my case I have a fresh React app built with create-react-app. I randomly selected a KendoReact component (using the fool-proof method of randomly clicking on the component page) and decided to add in the KendoReact DropDownList component.

Following the instructions on the DropDown package overview docs, I will run the following npm install command:

npm install --save @progress/kendo-react-dropdowns @progress/kendo-react-intl

While this can of course be a part of the above command I separated this out to ensure that I could highlight this new package which we all have to install:

npm install --save @progress/kendo-licensing

This is the package which is responsible for activating our license key and any KendoReact package requires the inclusion of @progress/kendo-licensing as a dependency.

Once I’ve added the DropDownList component in my App.js file, as highlighted on the DropDownList Getting Started page, and run the application we will see this in the console:

KendoReact License Key Warning Message letting the user know they need a commercial license key

The message gives us an indication that we need to apply a license key. Conveniently we have a link in the message which leads us to the KendoReact licensing page. From here I can follow the instructions that I mentioned above in this post, or on the licensing page, and download my license file by finding this button on the page (note that you have to be logged in to a Telerik account to see this):

KendoReact Download License Key Button

Now that I’ve downloaded the license file I’ll add kendo-ui-license.txt to the root of my project.

Once this has been added to the project I just have a quick command to execute:

npx kendo-ui-license activate

And that should be it! The next time I run my project the warning message should be gone and we’ll be off to the races. It really is as simple as that.

Additional Questions

If you have a question not answered in this blog, please review the Frequently Asked Questions section of the Set Up your KendoReact License Key page, which covers more scenarios. You can also always count on our helpful support team for additional questions about this change.

Got Feedback?

Are there ways we can improve this licensing mechanism for you and your team? Whether it is related to new components, features, or something across the entire library such as license keys, we want to make sure that we hear from you. You’re welcome to leave a comment in the section below or submit a support ticket to chat directly with our support and engineering team regarding any and all feedback and comments you may have around this effort!

Carl Bergenhem
About the Author

Carl Bergenhem

Carl Bergenhem was the Product Manager for Kendo UI.

Related Posts


Comments are disabled in preview mode.