Referencing Wijmo in your npm-based Applications

Wijmo, an extensive set of JavaScript UI controls, is available through all popular media used by modern-day developers, that is, npm, CDN, and downloadable zip. Even if you choose to install from npm, or reference from CDN, we recommend downloading the Wijmo Dev Kit as well. In addition to packages, it contains hundreds of samples, source code, reference apps, and much more.

Install Wijmo packages

Wijmo is available on npm as a set of wijmo.* packages in the @mescius npm scope. Here @mescius/wijmo.all represents a complete and latest set of released Wijmo packages. However, usually you need a specific version or subset of Wijmo library, depending upon which framework or controls you are using.

type=note

Note:

To use any npm packages (including Wijmo), you must install Node.js on your computer.

Below is the list of commands that you can run to install different versions and packages of Wijmo from NodeJS command prompt.

* RC and nightly builds are meant for testing only and should not be used in production.

** The styles package is automatically downloaded with all other Wijmo packages. Hence, normally, you do not need to download this package explicitly.

Add Wijmo to Your Application

This topic discusses how to add the following Wijmo files to your application

• Pure JavaScript modules

• Styles

• Cultures

• Framework modules

type=note

Note:

Every Wijmo package contains JavaScript files in multiple formats which is combination of the language versions and module formats. To learn more about these formats and how they are used in Wijmo, see Choose Correct Module Format

Add JavaScript Modules

To add Wijmo modules to the applications backed by TypeScript or Babel, you can use ES2015 import statements. Prefix the module names with “@mescius/” to specify the module names in import statements. For example, the following code imports the wijmo.grid module and creates an instance of the FlexGrid control:

import * as wjcGrid from '@mescius/wijmo.grid'; 
let grid = new wjcGrid.FlexGrid('#hostElement');

In case of ES5 code, use the CommonJS require() function to import modules.

var wjcGrid = require('@mescius/wijmo.grid'); 
var grid = new wjcGrid.FlexGrid('#hostElement'); 

Add Styles

For controls to appear correctly, you must add a reference to the wijmo.css style file or a theme file in your application.

To add a CSS file, you can choose any of the following methods:

Add link tag to HTML page:

<!--Specify path of either wijmo.css or theme css file --> 
<link href="../node_modules/@mescius/wijmo.styles/wijmo.css" rel="stylesheet" />

OR

<link href="../node_modules/@mescius/wijmo.styles/themes/wijmo.theme.cerulean.css " rel="stylesheet" />

Use ESM import statement:

import '@mescius/wijmo.styles/wijmo.css';

OR, use relative path in import statement:

import '../node_modules/@mescius/wijmo.styles/wijmo.css'; 

Format of the path specified in the import statement depends on the bundler or run-time module loader used in your application, and its configurations.

In the case of single page applications, it's enough to import css file only once in the root module of the application.

Add Cultures

Similarly, you can use script tags or import statements to apply a specific culture. All culture files are located inside @mescius/wijmo.cultures package.

Add script tag to HTML page:

<!--Specify path of the culture file --> 
<script href="../node_modules/@mescius/wijmo.cultures/wijmo.culture.ja.min.js" />

Use ESM import statement:

<!-- Specify the path of a culture file, Japanese in this case -->
import '@mescius/wijmo.cultures/wijmo.culture.ja';

OR, use relative path in import statement:

import '../node_modules/@mescius/wijmo.cultures/wijmo.culture.ja'; 

Format of the path specified in the import statement depends on the bundler or run-time module loader used in your application, and its configurations.

type=note

Note:

In case of relative paths used in import statements or link/script tags, the path to be mentioned may vary depending on directory structure of the project.

Add Frameworks

Wijmo supports all the popular JavaScript frameworks. For the list of supported frameworks, see Supported Frameworks. For information on how to add the modules of these frameworks to your application, see respective frameworks to get the detailed information.

You can also refer our Using Wijmo with NPM article for more details on how Wijmo npm modules can be used along with popular development tools like Angular CLI, create-react-app, Vue CLI, and Ionic CLI.