<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#getting-block-data-gas-prices-and-block-time"class="sidebar-link">Getting block data, gas prices and block time</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#blocks-gas-price-and-block-time"class="sidebar-link">Blocks, gas price and block time</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"class="header-
</code></pre><divclass="line-numbers-wrapper"><spanclass="line-number">1</span><br></div></div><h3id="usage"><ahref="#usage"class="header-anchor">#</a> Usage</h3><h4id="subspaceprovider"><ahref="#subspaceprovider"class="header-anchor">#</a> SubspaceProvider</h4><p>To use most of the <code>subspace-react</code> components, you need to wrap your app with the <code><SubspaceProvider web3={web3} /></code> component. This will make Subspace available to any nested components that accesses it via the <code>useSubspace</code> hook or has been wrapped in the <code>withSubspace</code> higher order component. Any React component might use Subspace so it makes sense to add the provider near the top level of your dApp. The <code>SubspaceProvider</code> requires a web3 object</p><divclass="language-js line-numbers-mode"><preclass="language-js"><code><spanclass="token comment">// index.js</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></div></div><h4id="usesubspace"><ahref="#usesubspace"class="header-anchor">#</a> useSubspace</h4><p>Rather than relying on global variables or passing Subspace through props, The easiest way to access Subspace features is via the <code>useSubspace</code> hook. Be sure that your entire dApp is wrapped with a <code><SubspaceProvider /></code> to have it available througout the component tree.</p><divclass="language-js line-numbers-mode"><preclass="language-js"><code><spanclass="token comment">// index.js</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></div></div><h4id="withsubspace"><ahref="#withsubspace"class="header-anchor">#</a> withSubspace</h4><p>This higher order component is provided as an alternative to the <code>useSubspace</code> hook. This injects the <code>subspace</code> property with an already initialized Subspace instance. Just like with the hook, your entire dApp needs to be wrapped with a <code><SubspaceProvider /></code>.</p><divclass="language-js line-numbers-mode"><preclass="language-js"><code><spanclass="token comment">// index.js</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></div></div><h4id="observe"><ahref="#observe"class="header-anchor">#</a> observe</h4><p>Useful to make your component subscribe to any observable props it receives when the component is mounted and automatically unsubscribes when the component is unmounted. It can be used with any kind of observables.</p><divclass="language-js line-numbers-mode"><preclass="language-js"><code><spanclass="token keyword">import</span><spanclass="token punctuation">{</span> observe <spanclass="token punctuation">}</span><spanclass="token keyword">from</span><spanclass="token string">'@embarklabs/subspace-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></div></div><divclass="custom-block warning"><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 that has been enhanced with <code>subspace.contract()</code>. 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>.</p></div><divclass="custom-block tip"><p>To learn more about how to use <code>subspace-react</code>, there are full working examples available in <ahref="https://github.com/embark-framework/subspace/tree/master/examples/"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></div><footerclass="page-edit"><!----><!----></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
