In This Topic ▼

Add References and Set a License - React JS

This tutorial shows how to add the LEADTOOLS references and set the runtime license in React.JS. Before any functionality from the SDK can be leveraged, a valid runtime license will have to be set. For instructions on how to obtain a runtime license refer to Obtaining a License.

Overview
Summary	This tutorial demonstrates how to set up a React.JS project and use the LEADTOOLS SDK to set a Runtime License.
Completion Time	15 minutes
Visual Studio Project	Download tutorial project (206 KB)
Platform	React JS Web Application
IDE	Visual Studio Code - Client
Development License	Download LEADTOOLS
Try it in another language	C#: .NET Framework (WinForms), .NET Core, Xamarin C API: C DLL (Windows) Java: Java, Java Android JavaScript: HTML5 JavaScript, HTML5 Angular, HTML5 React JS

Required Knowledge

The tutorial will be covering how to create a ReactJS application, add LEADTOOLS dependencies, and set a license file in order to use LEADTOOLS functionality. To follow this tutorial, a text editor such as Visual Studio Code is needed as well as Node.js.

Create the Project

If working on Windows, then open PowerShell or CommandPrompt. If working on a Unix based system, then open a new Terminal. Change the directory using cd to the location where the project is to be created. Run the following command to create a new ReactJS application:

npx create-react-app leadtools-getting-started

Add the license files

Navigate into the public folder inside the newly-created leadtools-getting-started folder, and create a LEADTOOLS folder. This folder will hold the 2 JavaScript license files that were sent via email LEADTOOLS.lic.txt and LEADTOOLS.lic.key.txt.

Add LEADTOOLS Dependencies

In order to utilize the LEADTOOLS components, the LEADTOOLS JavaScript libraries need to be added to the application. To do that, in the public folder create a new folder named Common.

Navigate to the JS library path in the SDK installation <InstallDir>\Bin\JS\ and copy Leadtools.js to the Common folder.

Add The Set License Code

Create a JS file in the Common folder created in the above step, and name it app.js. This is where the LEADTOOLS set license call will be added. Open this file in a text-editor, such as Visual Studio Code, and add the appropriate code block from the two options below.

Development License

If you have a JS license (LEADTOOLS.LIC.TXT) and key file (LEADTOOLS.LIC.KEY.TXT), you can use the code below to set your license:

window.onload = function () { 
   var licenseUrl = "./Leadtools/LEADTOOLS.lic.txt"; 
   var developerKey = "ADD THE CONTENTS OF YOUR LEADTOOLS.lic.key.txt FILE"; 
   lt.RasterSupport.setLicenseUri(licenseUrl, developerKey, function (setLicenseResult) { 
      // Check the status of the license  
      if (setLicenseResult.result) { 
         console.log("LEADTOOLS client license set successfully"); 
      } else { 
         var msg = "LEADTOOLS License is missing, invalid or expired\nError:\n"; 
         console.log(msg); 
         alert(msg); 
      } 
   }); 
}

Important Note:

Make sure to replace the value of the developerKey string with the contents of the License Key text file.

Evaluation License

If you are evaluating and do not have a JS license or key file, you can use the code below to set your license:

window.onload = function () { 
   // If you are evaluating and do not have a JS license or key file, you can use the code below to set your license: 
   var licenseUrl = "https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt"; 
   var developerKey = "EVAL"; 
   lt.RasterSupport.setLicenseUri(licenseUrl, developerKey, function (setLicenseResult) { 
      // Check the status of the license  
      if (setLicenseResult.result) { 
         console.log("LEADTOOLS client license set successfully"); 
      } else { 
         var msg = "LEADTOOLS License is missing, invalid or expired\nError:\n"; 
         console.log(msg); 
         alert(msg); 
      } 
   }); 
}

Import LEADTOOLS Dependencies

Open index.html in the public folder. Add the below necessary script tags inside the <head> to import LEADTOOLS dependencies.

Also import the JS file we created.

<script src="/common/Leadtools.js"></script> 
<script src="/common/app.js"></script>

Run the project

Open the Command line application used to create the ReactJS application in the root of the ReactJS project and run npm start.

This will build the ReactJS application, then open the developers console with F12 and see that the LEADTOOLS license has been set.

Wrap-Up

This tutorial showed how to set a client-side LEADTOOLS license in a ReactJS application.