<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><!----></nav><ulclass="sidebar-links"><li><ahref="/"class="sidebar-link">Home</a></li><li><ahref="/how-it-works.html"class="sidebar-link">How it works?</a><ulclass="sidebar-sub-headers"></ul></li><li><ahref="/getting-started.html"class="sidebar-link">Getting Started</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/getting-started.html#installation"class="sidebar-link">Installation</a></li><liclass="sidebar-sub-header"><ahref="/getting-started.html#importing-the-library"class="sidebar-link">Importing the library</a></li><liclass="sidebar-sub-header"><ahref="/getting-started.html#connecting-to-a-web3-provider"class="sidebar-link">Connecting to a web3 provider</a></li><liclass="sidebar-sub-header"><ahref="/getting-started.html#enhancing-your-contract-objects"class="sidebar-link">Enhancing your contract objects</a></li><liclass="sidebar-sub-header"><ahref="/getting-started.html#reacting-to-data"class="sidebar-link">Reacting to data</a></li><liclass="sidebar-sub-header"><ahref="/getting-started.html#tracking-state"class="sidebar-link">Tracking state</a></li><liclass="sidebar-sub-header"><ahref="/getting-started.html#tracking-events"class="sidebar-link">Tracking events</a></li><liclass="sidebar-sub-header"><ahref="/getting-started.html#tracking-balances"class="sidebar-link">Tracking balances</a></li><liclass="sidebar-sub-header"><ahref="/getting-started.html#subscriptions"class="sidebar-link">Subscriptions</a></li><liclass="sidebar-sub-header"><ahref="/getting-started.html#cleanup"class="sidebar-link">Cleanup</a></li></ul></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading open"><span>Integrations</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/integrations-overview.html"class="sidebar-link">Overview</a></li><li><ahref="/react.html"class="active sidebar-link">React</a><ulclass="sidebar-sub-headers"></ul></li><li><ahref="/vue.html"class="sidebar-link">Vue</a><ulclass="sidebar-sub-headers"></ul></li><li><sectionclass="sidebar-group is-sub-group depth-1"><pclass="sidebar-heading"><span>Redux</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/redux.html"class="sidebar-link">redux</a><ulclass="sidebar-sub-headers"></ul></li><li><ahref="/redux-observable.html"class="sidebar-link">redux-observable</a></li></ul></section></li><li><ahref="/reactive-graphql.html"class="sidebar-link">reactive-graphql</a><ulclass="sidebar-sub-headers"></ul></li><li><ahref="/apollo-client.html"class="sidebar-link">apollo-client</a><ulclass="sidebar-sub-headers"></ul></li></ul></section></li><li><ahref="/tutorial.html"class="sidebar-link">Tutorial</a></li><li><ahref="/api.html"class="sidebar-link">API</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/api.html#general"class="sidebar-link">General</a></li><liclass="sidebar-sub-header"><ahref="/api.html#contract-methods"class="sidebar-link">Contract methods</a></li><liclass="sidebar-sub-header"><ahref="/api.html#low-level-api-for-data-tracking"class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="react"><ahref="#react"aria-hidden="true"class="header-anchor">#</a> React</h1><p>We provide a higher-order component to connect to enhance presentational components to react to any observable (not limited to those generated by <strong>Subspace</strong>).</p><h3id="usage"><ahref="#usage"aria-hidden="true"class="header-anchor">#</a> Usage</h3><divclass="l
</code></pre><divclass="line-numbers-wrapper"><spanclass="line-number">1</span><br><spanclass="line-number">2</span><br><spanclass="line-number">3</span><br></div></div><p>This enhanced component will subscribe to any observable property it receives when the component is mounted and automatically unsubscribe when the component is unmounted.</p><h3id="example"><ahref="#example"aria-hidden="true"class="header-anchor">#</a> Example</h3><divclass="tip custom-block"><p>This example is available in <ahref="https://github.com/embark-framework/subspace/tree/master/examples/react-example1"target="_blank"rel="noopener noreferrer">Github<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></div><h4id="mycomponentobserver-js"><ahref="#mycomponentobserver-js"aria-hidden="true"class="header-anchor">#</a> MyComponentObserver.js</h4><divclass="language-js line-numbers-mode"><preclass="language-js"><code><spanclass="token keyword">import</span> React <spanclass="token keyword">from</span><spanclass="token string">"react"</span><spanclass="token punctuation">;</span>
</code></pre><divclass="line-numbers-wrapper"><spanclass="line-number">1</span><br><spanclass="line-number">2</span><br><spanclass="line-number">3</span><br><spanclass="line-number">4</span><br><spanclass="line-number">5</span><br><spanclass="line-number">6</span><br><spanclass="line-number">7</span><br><spanclass="line-number">8</span><br><spanclass="line-number">9</span><br><spanclass="line-number">10</span><br><spanclass="line-number">11</span><br><spanclass="line-number">12</span><br><spanclass="line-number">13</span><br><spanclass="line-number">14</span><br><spanclass="line-number">15</span><br><spanclass="line-number">16</span><br><spanclass="line-number">17</span><br><spanclass="line-number">18</span><br><spanclass="line-number">19</span><br><spanclass="line-number">20</span><br><spanclass="line-number">21</span><br><spanclass="line-number">22</span><br><spanclass="line-number">23</span><br><spanclass="line-number">24</span><br><spanclass="line-number">25</span><br><spanclass="line-number">26</span><br><spanclass="line-number">27</span><br></div></div><divclass="warning custom-block"><pclass="custom-block-title">Handling Contract Objects</p><p>The variable <code>MyContractInstance</code> is a <code>web3.eth.Contract</code> object pointing to a deployed contract address. You can use a DApp framework like <ahref="https://embark.status.im/docs/contracts_javascript.html"target="_blank"rel="noopener noreferrer">Embark<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> to easily import that contract instance: <code>import { MyContract } from './embarkArtifacts/contracts';</code>, or use web3.js directly (just like in the example <ahref="https://github.com/status-im/subspace/blob/master/examples/react/src/MyContract.js#L36-L42"target="_blank"rel="noopener noreferrer">source code<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>)</p></div><h4id="index-js"><ahref="#index-js"aria-hidden="true"class="header-anchor">#</a> index.js</h4><divclass="language-js line-numbers-mode"><preclass="language-js"><code><spanclass="token keyword">import</span> React <spanclass="token keyword">from</span><spanclass="token string">'react'</span><spanclass="token punctuation">;</span>
