Using Wijmo with React

Wijmo components for React allow you to use Wijmo controls in React JSX syntax. A Wijmo React component is a wrapper for the Wijmo control it represents. Component creates a Wijmo control behind the scenes, and provides a reference to the control instance via the control property. Component allows you to bind to the control properties and events declaratively in the React JSX syntax.

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 React components are shipped as a set of npm packages, one package per core library package, with the "react" word in their names. For example, "wijmo.react.grid" package represents components for controls from the core "wijmo.grid" package. The packages can be installed separately, or all together using the "@grapecity/wijmo.react.all" group package:

npm install @grapecity/wijmo.react.all

Importing Wijmo components

With this setup, you can import Wijmo React modules and use the components they contain. For example, this code adds a FlexGrid component to App component's JSX:

import * as React from 'react';
import * as wjcGrid from '@grapecity/wijmo.react.grid';

const App: React.FC = () => {
  const [data, setData] = React.useState(getData());

  return <wjcGrid.FlexGrid itemsSource={data} />
}

Adding Wijmo css

For Wijmo controls to look and work correctly, you need to load Wijmo css styles into your application. The styles are shipped in the @grapecity/wijmo.styles npm package.

You can load styles in your application's .jsx/.js root file, using this ESM import statement:

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

More React Instrucitons

Refer to the React Components topic for more details on using Wijmo in React applications.