# React Components

Learn about Wijmo's React Components in this documentation topic

## Content

* 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 "@mescius/wijmo.react.all" group package:

```auto
npm install @mescius/wijmo.react.all
```

See [this topic](/wijmo/docs/GettingStarted/Referencing-Wijmo-NPM) 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:

```javascript
import * as wjcGrid '@mescius/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:

```javascript
import * as React from 'react';
import * as wjcGrid from '@mescius/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 **@mescius/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:

```javascript
import '@mescius/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:

```javascript
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:

```javascript
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:

```javascript
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:

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