<div class="header-panel module">
<h2><span class="identifier">wijmo.react</span> Module</h2>
<dl class="dl-horizontal">
<dt>File</dt><dd class="filename">wijmo.react.js</dd>
<dt>Module</dt><dd><span class="identifier">wijmo.react</span></dd>
</dl>
<div class="comment"><p>Wijmo interop module for <a href="https://facebook.github.io/react/">React</a>.</p>
<p>This module provides React components that encapsulate Wijmo controls.</p>
<p>To use it, your application must include references to the React and 
ReactDOM libraries, as well as the regular Wijmo CSS and js files.</p>
<p>To add Wijmo controls to React components, include the appropriate
tags in your JSX (or TSX) files. For example, the code below adds
an <a href="topic/wijmo.react.InputNumber.Class.html"><span class="identifier">InputNumber</span></a> control to a React component:</p>


<pre>&lt;label htmlFor="inputnumber"&gt;Here's an InputNumber control:&lt;/label&gt;
&lt;Wj.InputNumber
  id="inputNumber"
  format="c2"
  min={ 0 } max={ 10 } step={ .5 }
  value={ this.state.value }
  valueChanged={ this.valueChanged }/&gt;</pre>
<p>The example illustrates the following important points:</p>
<p><ol>
  <li>
     Wijmo controls have tag names that start with the "Wj" prefix, followed by
     the control name. The "Wj" is a shorthand for the full module name
     "wijmo.react" which can also be used.</li>
<li>
     The tag attribute names match the control's properties and events.</li>
<li>
     Attribute values enclosed in quotes are interpreted as strings, and
     values enclosed in curly braces are interpreted as JavaScript expressions.</li>
<li>
     React components do not have implicit two-way bindings, so controls that
     modify values typically use event handlers to explicitly apply changes to 
     the parent component's state.</li>
</ol></p>
<p>To illustrate this last point, the component that contains the markup given above
would typically implement a "valueChanged" event handler as follows:</p>


<pre>valueChanged: function(s, e) {
  this.setState({ value, s.value });
}</pre>
<p>The event handler calls React's
<a href="https://facebook.github.io/react/docs/component-api.html">setState</a>
method to update the component state, automatically triggering a UI update.
Notice that the method does not write directly into the "state" object, which
should be treated as immutable in React applications.</p>
<p>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 additional initialization in addition
to setting properties in markup. For example:</p>


<pre>&lt;Wj.FlexGrid
  initialized={ function(s,e) {

    // assign a custom MergeManager to the grid
    s.mergeManager = new CustomMergeManager(s);

  }}
/&gt;</pre></div>
</div>
<div class="member-panel module members">
<h3 class="node">Classes</h3>
<ul>
<li class="mclass"><a href="topic/wijmo.react.AutoComplete.Class.html">AutoComplete</a></li>
<li class="mclass"><a href="topic/wijmo.react.BulletGraph.Class.html">BulletGraph</a></li>
<li class="mclass"><a href="topic/wijmo.react.Calendar.Class.html">Calendar</a></li>
<li class="mclass"><a href="topic/wijmo.react.ColorPicker.Class.html">ColorPicker</a></li>
<li class="mclass"><a href="topic/wijmo.react.ComboBox.Class.html">ComboBox</a></li>
<li class="mclass"><a href="topic/wijmo.react.ComponentBase.Class.html">ComponentBase</a></li>
<li class="mclass"><a href="topic/wijmo.react.FinancialChart.Class.html">FinancialChart</a></li>
<li class="mclass"><a href="topic/wijmo.react.FlexChart.Class.html">FlexChart</a></li>
<li class="mclass"><a href="topic/wijmo.react.FlexGrid.Class.html">FlexGrid</a></li>
<li class="mclass"><a href="topic/wijmo.react.FlexPie.Class.html">FlexPie</a></li>
<li class="mclass"><a href="topic/wijmo.react.FlexRadar.Class.html">FlexRadar</a></li>
<li class="mclass"><a href="topic/wijmo.react.FlexSheet.Class.html">FlexSheet</a></li>
<li class="mclass"><a href="topic/wijmo.react.GroupPanel.Class.html">GroupPanel</a></li>
<li class="mclass"><a href="topic/wijmo.react.InputColor.Class.html">InputColor</a></li>
<li class="mclass"><a href="topic/wijmo.react.InputDate.Class.html">InputDate</a></li>
<li class="mclass"><a href="topic/wijmo.react.InputDateTime.Class.html">InputDateTime</a></li>
<li class="mclass"><a href="topic/wijmo.react.InputMask.Class.html">InputMask</a></li>
<li class="mclass"><a href="topic/wijmo.react.InputNumber.Class.html">InputNumber</a></li>
<li class="mclass"><a href="topic/wijmo.react.InputTime.Class.html">InputTime</a></li>
<li class="mclass"><a href="topic/wijmo.react.LinearGauge.Class.html">LinearGauge</a></li>
<li class="mclass"><a href="topic/wijmo.react.ListBox.Class.html">ListBox</a></li>
<li class="mclass"><a href="topic/wijmo.react.Menu.Class.html">Menu</a></li>
<li class="mclass"><a href="topic/wijmo.react.MultiAutoComplete.Class.html">MultiAutoComplete</a></li>
<li class="mclass"><a href="topic/wijmo.react.MultiRow.Class.html">MultiRow</a></li>
<li class="mclass"><a href="topic/wijmo.react.MultiSelect.Class.html">MultiSelect</a></li>
<li class="mclass"><a href="topic/wijmo.react.PdfViewer.Class.html">PdfViewer</a></li>
<li class="mclass"><a href="topic/wijmo.react.PivotChart.Class.html">PivotChart</a></li>
<li class="mclass"><a href="topic/wijmo.react.PivotGrid.Class.html">PivotGrid</a></li>
<li class="mclass"><a href="topic/wijmo.react.PivotPanel.Class.html">PivotPanel</a></li>
<li class="mclass"><a href="topic/wijmo.react.Popup.Class.html">Popup</a></li>
<li class="mclass"><a href="topic/wijmo.react.RadialGauge.Class.html">RadialGauge</a></li>
<li class="mclass"><a href="topic/wijmo.react.ReportViewer.Class.html">ReportViewer</a></li>
<li class="mclass"><a href="topic/wijmo.react.Sunburst.Class.html">Sunburst</a></li>
<li class="mclass"><a href="topic/wijmo.react.TreeMap.Class.html">TreeMap</a></li>
<li class="mclass"><a href="topic/wijmo.react.TreeView.Class.html">TreeView</a></li>
</ul>
</div>
