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.
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.
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.
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.
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:
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.
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.
kendo-ui-license.txt) to the root folder of your project.
@progress/kendo-licensingas a project dependency by running
npm install --save @progress/kendo-licensing.
npx kendo-ui-license activatein the console.
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.
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:
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):
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.
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.
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!
Subscribe to be the first to get our expert-written articles and tutorials for developers!