Keeping Up to Date
The KendoReact packages are released frequently with bug fixes and new features.
Starting with KendoReact 11, some component packages now provide codemods to help you migrate between major versions. Check out Assisted Migration.
Semantic Versioning
The KendoReact packages are released together (all @progress/kendo-react-*
packages have the same version) and their version numbers follow the rules of Semantic Versioning:
- A major version bump (X.y.z) signals a breaking change in the API. You might need to update application code or dependencies.
- A minor version bump (x.Y.z) signals the addition of new features. Existing code will continue to work but new features may require additional setup.
- A patch version bump (x.y.Z) indicates a bug-fix release. Typically, patches do not require changes to application code.
Updating to Compatible Releases
The package.json
file references a major version range—for example, "@progress/kendo-react-grid": "^10.0.0"
. To fetch the latest compatible Minor or Patch release, run npm update
.
Version Compatibility
All complex KendoReact components must have the same version as their KendoReact dependencies in order to function properly. The easiest way to track that is to always update the used KendoReact packages to one and the same version.
When you are upgrading the KendoReact packages to the latest version, you have to make sure that the kendo-themes packages are also updated to the latest in order to have properly styled components and avoid any version incompatibility.
Manual Update
To update to the most recent versions of the KendoReact components, use npm-check-updates
.
-
To upgrade all Progress packages, run:
shnpx npm-check-updates --upgrade --filter "/@progress.*/"
-
To upgrade only KendoReact packages, run:
shnpx npm-check-updates --upgrade --filter "/@progress/kendo-react.*/"
-
In some cases, you may have to specify the location of the
package.json
file:shnpx npm-check-updates --upgrade --filter "/@progress.*/" --packageFile ./package.json
A successful run will record the updated versions in package.json
and package-lock.json
.
Upgrading between major versions might require you to change the application code.
For more details, refer to the KendoReact Change Log.
Assisted Migration
Starting with KendoReact 11 and Kendo CLI 1.9.0, you can speed up the migration between major KendoReact versions with the Kendo CLI.
The Kendo CLI is a powerful command-line tool that accelerates your React development. You can use it to quickly create and update projects, and scaffold pages and components.
Overview
-
Install the Kendo CLI globally.
bashnpm i -g @progress/kendo-cli
-
In the root of your project, run:
bashnpx @progress/kendo-cli migrate
If not already installed, you will be prompted to install the Kendo CLI. Next, this command checks for available Kendo UI updates (including any peer dependencies), prompts you to install the updates, and then applies any available codemods on top.
-
Confirm that you want to install the available updates.
-
Confirm that you want to apply the available transformations.
-
Review and accept the suggested transformations.
The Kendo CLI begins to apply the available codemods version by version, starting with the transformations for the earliest version. -
Look for newly added code comments to your code. These indicate that you need to further adjust any existing custom logic.
-
Finally, do a test run of your project to verify that everything works as expected.
Best Practices
For a more manageable migration process, consider the following recommended practices:
- Migrate between consecutive major versions. For example, migrate from v10 to v11. This lets you review and adjust your code version by version, avoiding possible conflicts between breaking changes.
- Migrate one package at a time. This provides finer control over the migration process.
CLI Quick Guide
The following list describes the most common migration scenarios.
- You can run any of the listed commands with or without a package specified.
- If not already installed, you will be prompted to install the Kendo CLI when running
npx @progress/kendo-cli migrate
for the first time. - Once installed, you can also run commands with the
kendo
handle instead ofnpx @progress/kendo-cli
. For example:kendo migrate
.
# Install the Kendo CLI globally.
npm i -g @progress/kendo-cli
# Run a guided migration. You will be prompted every step of the way.
npx @progress/kendo-cli migrate
# Migrate a specific package.
npx @progress/kendo-cli migrate @progress/kendo-react-grid
# Migrate between specific versions.
npx @progress/kendo-cli migrate --from 10 --to 11
# Run a quick migration without any prompts.
npx @progress/kendo-cli migrate --force
# Only install the available updates. Do not run any codemods.
# Useful when you want to manually migrate your code.
npx @progress/kendo-cli migrate --no-codemods
# Only run the available codemods. Do not install any packages.
# Useful when you already have the packages installed.
npx @progress/kendo-cli migrate --no-install
CLI Arguments
If you want more control over the migration, you can use any of the following arguments when running npx @progress/kendo-cli migrate
.
Argument | Description | Sample Use |
---|---|---|
<pkg> | Specifies one or more packages for which to execute the assisted migration (with any additional arguments). If not set, runs for all available Kendo packages. | npx @progress/kendo-cli migrate @progress/kendo-react-grid |
--help | Prints the help for the command. | npx @progress/kendo-cli migrate --help |
--version | Prints the version of the Kendo CLI. | npx @progress/kendo-cli --version |
--verbose | Sets the verbosity level of the command output on a level from 0 (silent) to 5 (most verbose). By default: 1. | npx @progress/kendo-cli migrate --verbose=3 |
--quiet | Silences the output as much as possible. Shorthand for --verbose=0 . | npx @progress/kendo-cli migrate --quiet |
--force | Runs in force mode and does not ask for any confirmations. | npx @progress/kendo-cli migrate --force |
--to | Specifies the package version to migrate to. If not set, migrates to the latest available version of the respective package(s). | npx @progress/kendo-cli migrate @progress/kendo-react-grid --codemods --to=11 |
--from | Specifies the package version to migrate from. If not set, uses the current version. | npx @progress/kendo-cli migrate @progress/kendo-react-grid --codemods --from=10 |
--no-install | Skips the installation part of the migration. Use this option if you have already updated your packages and want to only run the available codemods. | npx @progress/kendo-cli migrate --no-install |
--no-codemods | Skips the codemods step of the migration. Use this option to only install the available updates. | npx @progress/kendo-cli migrate --no-codemods |
--no-peer-deps | Skips the installation of any peer dependencies for the updated packages. By default, the migrate command always installs the available peer dependencies. | npx @progress/kendo-cli migrate --no-peer-deps |
--no-optional | Skips the optional codemods, if any. Use this option to run only the required transformations. | npx @progress/kendo-cli migrate --no-optional |
Available Codemods
KendoReact provides the following codemods:
Versions | Component |
---|---|
v10 to v11 |