Documentation
Getting Started
Referencing Wijmo from NPM
5.20231.904
5.20231.904

Referencing Wijmo in your npm-based Applications

Note We highly recommend that you download the Wijmo dev kit in addition to installing from npm. The dev kit includes hundreds of samples with source code, reference apps and more.

Installation

Wijmo is represented on npm with the set of wijmo.* packages in the @grapecity npm scope, where the @grapecity/wijmo.all represents all the packages of the library. As with any npm package, you need to have NodeJS installed on your computer to use it.

The latest Wijmo release version can be installed from npm by executing the following command from the NodeJS command prompt:

npm install @grapecity/wijmo.all

In addition to release builds, we also publish release candidate (RC) and nightly builds. RC and nightly builds are meant for testing only and should not be used in production.

To install the latest RC build, use this command:

npm install @grapecity/wijmo.all@rc

To install the latest nightly build, use this command:

npm install @grapecity/wijmo.all@nightly

Installing a group of packages

Usually you need only a specific subset of Wijmo packages in your application, depending on whether and which framework you use. Wijmo provides special group packages (wijmo.*.all) that facilitate this task. Group packages don't contain any code inside them, they only specify package dependencies that force npm or yarn to perform flat installation of the real packages pertaining to the group.

To install only core pure JavaScript packages, use this command:

npm install @grapecity/wijmo.purejs.all

To install only packages for a specific framework, along with core pure JavaScript packages, use this command:

npm install @grapecity/wijmo.{framework}.all

, where {framework} can take one of the following values: angular2, react, vue2, webcomponents, angular, knockout.
For example, this command installs only Angular interop packages, along with pure JavaScript packages:

npm install @grapecity/wijmo.angular2.all

Installing a specific package

You can also install specific Wijmo packages. All packages this package depends on will be installed automatically.
For example, if your application only needs the wijmo.grid package, you can install it using this command:

npm install @grapecity/wijmo.grid

The following packages wijmo.grid depends on will be installed automatically:

  • @grapecity/wijmo.input
  • @grapecity/wijmo
  • @grapecity/wijmo.styles

Installing styles

Wijmos CSS style and theme files, along with their SCSS sources, are shipped in the separate @grapecity/wijmo.styles package.
Normally you don't need to install this package explicitly, because the most basic @grapecity/wijmo package declares a dependency on the styles package, so it will be installed automatically along with any other Wijmo package.

Installing cultures

Culture files with language/country specific format descriptors and UI strings are shipped in the separate @grapecity/wijmo.cultures package. It can be installed using this command:

npm install @grapecity/wijmo.cultures

Adding Wijmo to your Application

Adding JavaScript modules

Every Wijmo package contains JavaScript files in multiple formats (combinations of ES5/ES2015 language version and CommonJS/ESM module formats), with the ES5+CommonJS file as the default format, referenced in the package.json main field. You can use them along with tools that are capable of loading modules, like the Webpack bundler or SystemJS run-time module loader.

To import Wijmo modules into your application backed by TypeScript or Babel you can use ES2015 import statements. All module names in import statements begin with the @grapecity/ prefix, followed by the module name. For example, the following code imports the wijmo.grid module and creates an instance of the FlexGrid control:

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

If you write code in ES5 then the CommonJS require() function can be used to import modules. For example:

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

Adding styles

You must add a reference to the Wijmo CSS style file for controls to appear correctly on the screen. Yo can do either by adding a link tag to HTML page:

<link href="node_modules/@grapecity/wijmo.styles/wijmo.css" rel="stylesheet" />

or using ESM import statement like this:

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

or like this (with the relative path):

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

The actual format of the path specified in the import statement depends on the bundler or run-time module loader used in your application, and its configuration settings.

For the SPA application it's enough to import css file only once, somewhere in the root module of the application.

In the same way you can import a theme file, for example:

import '@grapecity/wijmo.styles/themes/wijmo.theme.cerulean.css';

Note that if you import a theme file, you do not need to import the basic wijmo.css style file. Though functionally this is not a mistake to import both.

Adding cultures

You can apply a specific culture file from the @grapecity/wijmo.cultures package using import statement like this:

import '@grapecity/wijmo.cultures/wijmo.culture.ja';

Please see 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.