Register Syncfusion^® License Key in React Application

If your project references any Syncfusion® React packages, you must register a valid license key. Registration can be done in code or via an activation command. License validation occurs offline during application startup, so no internet connection is required at runtime.

Generate a key first: Create a Syncfusion® license key.

Choose a registration method

• Register the license key in the project (initialize in app code)

• Register the license key using the npx command (activate via CLI)

If both a license text file and an environment variable are present, the syncfusion-license.txt file takes precedence. Remove the file if you want to use the environment variable instead.

Register Syncfusion^® license key in the project

Register the license key during app startup (for example, in main.tsx or your app entry file) before you render or use any Syncfusion components.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './styles/index.css'
import App from './App.tsx'
import { registerLicense } from '@syncfusion/react-base';

// Registering Syncfusion license key
registerLicense('Replace your generated license key here');

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Best practices:

• Initialize once at startup so all components are covered.

• Keep the key out of source control; prefer environment variables for secrets.

Register Syncfusion^® license key using the npx command

You can activate the license without changing code by using npx. Choose one of the options below.

• Register the license key with the license file

• Register the license key with the environment variable

Register the license key with the license file

• Create a text file named syncfusion-license.txt in your project root and paste your license key into it.

• From the project root, activate the key:

npx syncfusion-react-license activate

• Expected output: License message: (INFO) Syncfusion License imported successfully.

• Clear caches by removing node_modules/.cache.

• Run your app. The runtime license notice will no longer appear.

Prefer environment variables in shared repos to avoid committing secrets.

Register the license key with the environment variable

Set an environment variable named SYNCFUSION_LICENSE with your key, then run the activation command in your project.

• After setting the variable, restart your IDE/terminal so the change takes effect.

• Activate from your project root:

npx syncfusion-react-license activate

Expected output:

• License message: (INFO) Syncfusion License imported successfully.

Then clear node_modules/.cache folder and run your app.

Windows

Set the environment variable using setx:

setx SYNCFUSION_LICENSE "license key"

macOS

Add the variable to your shell profile:

echo 'export SYNCFUSION_LICENSE="license key"' >> ~/.bash_profile

To edit manually:

nano ~/.bash_profile

Save and restart your terminal to apply changes.

Linux

Export the variable in your shell:

export SYNCFUSION_LICENSE='license key'

Restart your IDE/terminal before activation.

Registering licenses when using EJ2 React and Pure React together

When using both EJ2 React and Pure React components together, since they are maintained as separate packages, you should register licenses for both the suites.

Register license key via code

Import and call the registerLicense method from both base packages in your app startup (for example, in main.tsx or your app entry file) before you render or use any Syncfusion components.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './styles/index.css'
import App from './App.tsx'

import { registerLicense } from '@syncfusion/ej2-base';
import { registerLicense as registerPureReactLicense } from '@syncfusion/react-base';

// Registering Syncfusion license key for both the suites
registerLicense('Replace your generated license key here');
registerPureReactLicense('Replace your generated license key here');

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Activate license using npx command

When activating licenses via npx for a project that includes both EJ2 React and Pure React components, you do not need to change the license file name (syncfusion-license.txt) or the environment variable name (SYNCFUSION_LICENSE). The same file and variable can be used for both suites, as they share the same license key format. However, you must run the corresponding activation commands for each suite to register them properly.

Run the following commands from your project root: