Integrating jQWidgets into React

Not that I have much time these days to work on tech, but still, occasionally an opportunity presents itself. And thusly, we have an excuse for a quick tech post.

If you need to integrate jQWidgets with React, jQWidgets provides this guide to make it happen. Unfortunately, this doesn’t exactly work if you’re using the jqwidgets-framework npm and don’t want to have a local copy of the core files in your application directory structure.

Should you have need for jQWidgets in your React application (with webpack), these steps will help you get it running.

Note: Bear in mind, the ‘native’ support that jQWidgets advertises appears to be just a React wrapper for each of the widgets, so you may have difficulty with component changes that will update the render without manually manipulating them through the widget’s exposed methods, or destroying and recreating the widget with each update.

Step 1: Install jQWidgets

Easy enough:

npm install jqwidgets-framework --save

You’ll also need babel-preset-es2015 and babel-preset-react if you’re not using them already.

Step 2: Configure webpack

Following on from the previous step, if you’re not using ES2015 already, your webpack configuration will need to have a section similar to the following to ensure the jQWidgets framework loads correctly:

{
  test: /\\.(js|jsx)$/,
  loader: 'babel-loader',
  include: path.resolve(\_\_dirname, "node\_modules/jqwidgets-framework/jqwidgets-react"),
  query: {
    presets: \['babel-preset-es2015', 'babel-preset-react'\]
  }
}

Add this after the default JS loader test. Updating the include path to be the jqwidgets-react directory in your node_modules.

You may have to muck around with the include and exclude directives in the default JS loader test as well. For example, if you’re using React.js Boilerplate, in the default JS loader, you’ll need to replace:

{
  test: /\\.js$/, // Transform all .js files required somewhere with Babel
  loader: 'babel-loader',
  exclude: /node\_modules/,
  query: options.babelQuery,
}

with:

{
  test: /\\.js$/, // Transform all .js files required somewhere with Babel
  loader: 'babel-loader',
  include: /(app|internals|server)/,
  query: options.babelQuery,
}

Specifically, the exclude was replaced with an include so that the ES2015 loader for jQWidgets in node_modules won’t be skipped later on.

Step 3: Load the jQWidgets core framework

The original guide loaded the necessary jQWidgets files in index.html. But, if you do not have a local copy of the library as an external lib, and your node_modules isn’t exposed, you can load them directly from node_modules by importing them somewhere in your app, such as your main application script:

import 'jqwidgets-framework/jqwidgets/styles/jqx.base.css';
import 'jqwidgets-framework/jqwidgets/jqx-all';

jqx-all will load all the components, but according to the docs, you should also be able to load jqx-core and only the components you need.

Step 4: Load the jQWidgets React component

Now that the core framework is loaded, wherever you will need a jQWidgets component, import it, and you’re done.

import JqxTree from 'jqwidgets-framework/jqwidgets-react/react\_jqxtree.js';