React Components

• Supports React version 15.0.0 or higher.

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.

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

See this topic for more details about Wijmo npm packages.

After that you can import modules using ESM import statements. For example, this import statement imports the content of the "wijmo.react.grid" module:

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

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. There are two main css files:

• wijmo.css - includes styles for all Wijmo controls
• wijmo-core.css - truncated version of wijmo.css, which doesn't include styles for Enterprise controls.

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

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

React JSX Syntax

Wijmo React components use consistent naming conventions for specifying them in JSX syntax. They expose properties for property and event bindings with the same names as in the underlying JavaScript controls they represent. For example:

return (
  <div>
    <wjcInput.InputNumber
      value={amount} // binding to a component property 
      format="n0" // binding to a string
      isReadOnly={true} // binding to boolean
      valueChanged={valueChanged} // event binding
    /> 
  </div>
);

Event binding details

Wijmo event handlers are defined as functions with two parameters: sender and event argument. When you bind to a component event, you should specify the name of a function with this signature as a binding source. For example:

const [amount, setAmount] = React.useState(0);

const onValueChanged = (sender, args) => {
  setAmount(sender.value);
};

return (
  <div>
    <wjcInput.InputNumber
      value={amount} 
      valueChanged={onValueChanged}
    /> 
  </div>
);

The "initialized" Event

All Wijmo React components include an "initialized" event that is raised after the control has been added to the page and initialized.

You can use this event to perform further initalization in addition to setting properties in JSX. The signature of the handler function is the same as any other Wijmo event handlers. For example:

const initGrid = (grid, args) => {
  grid.mergeManager = new CustomMerge(grid);
}

return (
  <div>
    <wjcGrid.FlexGrid initialized={initGrid} /> 
  </div>
);

Creating Wijmo controls in code

Wijmo components for React are intended for a usage in React JSX. If you want to create a Wijmo control in code, you should use a Wijmo control from a core module for this purpose, instead of a component. A core module has the same name as a corresponding React interop module, but without the "react" word in the name. For example, this code creates a FlexGrid control in code:

import { FlexGrid } from '@grapecity/wijmo.grid';
let flex = new FlexGrid('#host_element');