Back to Details

syncfusion-react-license

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Syncfusion React Licensing

Syncfusion React 许可

This skill guides you through Syncfusion React licensing requirements, license key generation, registration methods, and troubleshooting validation errors.
本技能将指导您了解Syncfusion React的许可要求、许可证密钥生成、注册方法以及验证错误的故障排除。

Table of Contents

目录

Licensing Overview

许可概述

Syncfusion license key validation was introduced in the 2022 Volume 1 release (v20.1.0.47) for Essential JS2 platforms. All React applications referencing Syncfusion packages from npm, CDN, or build must register a valid license key to avoid validation warnings.
Syncfusion许可证密钥验证功能在2022年第1版发布（v20.1.0.47）中引入，适用于Essential JS2平台。所有从npm、CDN或构建中引用Syncfusion包的React应用，必须注册有效的许可证密钥以避免验证警告。

Key Licensing Details

关键许可细节

License Key vs Unlock Key:
  • License Key: String registered in application code to validate Syncfusion package usage
  • Unlock Key: Used only during Syncfusion installer process
  • ⚠️ Important: License key is NOT the same as installer unlock key
Core Requirements:
  • License key validation introduced in v20.1.0.47+ (2022 Volume 1)
  • License keys are version and platform/edition specific
  • Validation occurs offline (no internet required during runtime)
  • Required when using npm packages or trial installers
  • Not required when using licensed installers
License Types:
  • Trial license: 30-day evaluation period, full functionality, generates trial key, displays warning after expiration
  • Community license: Free for qualifying individuals/organizations (<$1M USD revenue), same functionality as paid license, annual renewal required
  • Paid license: Commercial license for enterprise use, perpetual or subscription-based, technical support included
Edition-Based vs Platform-Based:
  • v31.1.17+ (Edition-based): UI Edition, Document SDK, PDF Viewer SDK, DOCX Editor SDK, Spreadsheet Editor SDK, Enterprise Edition (all editions combined)
  • v30.x.x and earlier (Platform-based): React, Angular, Vue, JavaScript, Blazor, etc.
Build Server Scenarios:
  • Using npm packages: License key required - register using 
    registerLicense()
    or NPX command
  • Using trial installer: License key required - trial warnings appear after 30 days
  • Using licensed installer: License key NOT required - embedded license validation included
Offline Validation:
  • No internet connection required during application runtime
  • License validated locally against package metadata at startup
  • Works in air-gapped environments and offline development
  • No external API calls or performance impact
许可证密钥 vs 解锁密钥：
  • 许可证密钥： 在应用代码中注册的字符串，用于验证Syncfusion包的使用
  • 解锁密钥： 仅在Syncfusion安装程序过程中使用
  • ⚠️ 重要提示： 许可证密钥与安装程序解锁密钥不同
核心要求：
  • 许可证密钥验证功能在v20.1.0.47及以上版本（2022年第1版）中引入
  • 许可证密钥与版本和平台/Edition绑定
  • 验证过程离线进行（运行时无需联网）
  • 使用npm包或试用安装程序时需要
  • 使用授权安装程序时不需要
许可类型：
  • 试用许可证： 30天评估期，功能完整，可生成试用密钥，过期后显示警告
  • 社区许可证： 符合条件的个人/组织（年收入<$100万美元）可免费使用，功能与付费许可证相同，需每年续订
  • 付费许可证： 企业商用许可证，永久或订阅制，包含技术支持
基于Edition与基于平台的许可模式：
  • v31.1.17及以上（基于Edition）： UI Edition、Document SDK、PDF Viewer SDK、DOCX Editor SDK、Spreadsheet Editor SDK、Enterprise Edition（包含所有Edition）
  • v30.x.x及更早版本（基于平台）： React、Angular、Vue、JavaScript、Blazor等
构建服务器场景：
  • 使用npm包： 需要许可证密钥 - 通过
    registerLicense()
    或NPX命令注册
  • 使用试用安装程序： 需要许可证密钥 - 30天后出现试用警告
  • 使用授权安装程序： 不需要许可证密钥 - 已嵌入许可证验证
离线验证：
  • 应用运行时无需联网
  • 启动时根据包元数据在本地验证许可证
  • 适用于隔离网络环境和离线开发
  • 无外部API调用，不影响性能

Documentation and Navigation Guide

文档与导航指南

Generating License Keys

生成许可证密钥

📄 Read: references/license-generation.md
  • Edition-based licensing (v31.1.17+): UI Edition, Document SDK, PDF Viewer SDK, DOCX Editor SDK, Spreadsheet Editor SDK, Enterprise Edition
  • Platform-based licensing (v30.x.x and earlier): React, JavaScript, Angular, etc.
  • Generating keys from License & Downloads page
  • Claim License Key page usage
  • Version and platform specific license key
📄 阅读： references/license-generation.md
  • 基于Edition的许可（v31.1.17及以上）： UI Edition、Document SDK、PDF Viewer SDK、DOCX Editor SDK、Spreadsheet Editor SDK、Enterprise Edition
  • 基于平台的许可（v30.x.x及更早版本）： React、JavaScript、Angular等
  • 从许可与下载页面生成密钥
  • 申领许可证密钥页面的使用
  • 与版本和平台绑定的许可证密钥

Registering License Keys

注册许可证密钥

📄 Read: references/license-registration.md
  • Direct registration in index.js with 
    registerLicense()
  • NPX command registration: 
    npx syncfusion-license activate
  • License file method: 
    syncfusion-license.txt
  • Environment variable method: 
    SYNCFUSION_LICENSE
  • CI/CD integration: GitHub Actions, Azure Pipelines
  • Active license, active trial, expired license scenarios
📄 阅读： references/license-registration.md
  • 在index.js中通过
    registerLicense()
    直接注册
  • NPX命令注册：
    npx syncfusion-license activate
  • 许可证文件方式：
    syncfusion-license.txt
  • 环境变量方式：
    SYNCFUSION_LICENSE
  • CI/CD集成：GitHub Actions、Azure Pipelines
  • 有效许可证、有效试用、过期许可证场景

Troubleshooting License Errors

许可错误故障排除

📄 Read: references/licensing-errors.md
  • License key not registered error
  • Invalid key error
  • Trial expired error (30 days)
  • Platform mismatch error
  • Version mismatch error
  • NPX command validation errors
📄 阅读： references/licensing-errors.md
  • 未注册许可证密钥错误
  • 无效密钥错误
  • 试用过期错误（30天）
  • 平台不匹配错误
  • 版本不匹配错误
  • NPX命令验证错误

Quick Start

快速开始

1. Generate License Key

1. 生成许可证密钥

Visit License & Downloads page:
For v31.1.17+ (Edition-based):
  • Select version 31.x.x or higher
  • Select required editions: UI Edition, Document SDK, PDF Viewer SDK, DOCX Editor SDK, Spreadsheet Editor SDK
  • Recommended: Select all 5 editions for Enterprise Edition key
  • Click "Get License Key"
For v30.x.x and earlier (Platform-based):
  • Select version 30.x.x or earlier
  • Select platforms: React, JavaScript, etc.
  • Click "Get License Key"
访问许可与下载页面：
对于v31.1.17及以上版本（基于Edition）：
  • 选择31.x.x或更高版本
  • 选择所需Edition：UI Edition、Document SDK、PDF Viewer SDK、DOCX Editor SDK、Spreadsheet Editor SDK
  • 推荐： 选择全部5个Edition以获取Enterprise Edition密钥
  • 点击“获取许可证密钥”
对于v30.x.x及更早版本（基于平台）：
  • 选择30.x.x或更早版本
  • 选择平台：React、JavaScript等
  • 点击“获取许可证密钥”

2. Register License Key in Application

2. 在应用中注册许可证密钥

javascript
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { registerLicense } from '@syncfusion/ej2-base';

// Register Syncfusion license key
registerLicense('YOUR_LICENSE_KEY_HERE');

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
Note: The 
@syncfusion/ej2-base
package is a dependency for all Syncfusion components and will be automatically installed when you install any Syncfusion React package. You don't need to explicitly add it to your 
package.json
file.
javascript
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { registerLicense } from '@syncfusion/ej2-base';

// 注册Syncfusion许可证密钥
registerLicense('YOUR_LICENSE_KEY_HERE');

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
注意： 
@syncfusion/ej2-base
包是所有Syncfusion组件的依赖项，当您安装任何Syncfusion React包时会自动安装。您无需将其显式添加到
package.json
文件中。

Common Registration Methods

常见注册方法

Direct Registration (Recommended for Simple Apps)

直接注册（推荐用于简单应用）

javascript
// src/index.js
import { registerLicense } from '@syncfusion/ej2-base';

registerLicense('Replace your generated license key here');

ReactDOM.render(<App />, document.getElementById('root'));
javascript
// src/index.js
import { registerLicense } from '@syncfusion/ej2-base';

registerLicense('Replace your generated license key here');

ReactDOM.render(<App />, document.getElementById('root'));

Environment Variable Registration

环境变量注册

javascript
// src/index.js
import { registerLicense } from '@syncfusion/ej2-base';

// Use environment variable for license key
const licenseKey = process.env.REACT_APP_SYNCFUSION_LICENSE;
if (licenseKey) {
  registerLicense(licenseKey);
}

ReactDOM.render(<App />, document.getElementById('root'));
env
undefined
javascript
// src/index.js
import { registerLicense } from '@syncfusion/ej2-base';

// 使用环境变量存储许可证密钥
const licenseKey = process.env.REACT_APP_SYNCFUSION_LICENSE;
if (licenseKey) {
  registerLicense(licenseKey);
}

ReactDOM.render(<App />, document.getElementById('root'));
env
undefined

.env

.env

REACT_APP_SYNCFUSION_LICENSE=your_license_key_here
undefined
REACT_APP_SYNCFUSION_LICENSE=your_license_key_here
undefined

NPX Command Registration (Build Servers)

NPX命令注册（适用于构建服务器）

bash
undefined
bash
undefined

Create syncfusion-license.txt in project root

在项目根目录创建syncfusion-license.txt文件

echo "YOUR_LICENSE_KEY" > syncfusion-license.txt
echo "YOUR_LICENSE_KEY" > syncfusion-license.txt

Activate license

激活许可证

npx syncfusion-license activate
npx syncfusion-license activate

Clear cache after activation

激活后清除缓存

rm -rf node_modules/.cache
undefined
rm -rf node_modules/.cache
undefined

GitHub Actions CI/CD

GitHub Actions CI/CD

yaml
undefined
yaml
undefined

.github/workflows/build.yml

.github/workflows/build.yml

steps:
  • name: Install dependencies run: npm install
  • name: Activate Syncfusion License run: npx syncfusion-license activate env: SYNCFUSION_LICENSE: ${{ secrets.SYNCFUSION_LICENSE }}
undefined
steps:
  • name: Install dependencies run: npm install
  • name: Activate Syncfusion License run: npx syncfusion-license activate env: SYNCFUSION_LICENSE: ${{ secrets.SYNCFUSION_LICENSE }}
undefined

Azure Pipelines CI/CD

Azure Pipelines CI/CD

yaml
undefined
yaml
undefined

azure-pipelines.yml

azure-pipelines.yml

steps:
  • script: npm install displayName: 'Install dependencies'
  • script: npx syncfusion-license activate displayName: 'Activate Syncfusion License' env: SYNCFUSION_LICENSE: $(SYNCFUSION_LICENSE)
undefined
steps:
  • script: npm install displayName: 'Install dependencies'
  • script: npx syncfusion-license activate displayName: 'Activate Syncfusion License' env: SYNCFUSION_LICENSE: $(SYNCFUSION_LICENSE)
undefined