subspace-docs/react.md

# React
We provide a higher-order component to connect to enhance presentational components to react to any observable (not limited to those generated by Phoenix). 

### Usage
```js
import { observe } from 'phoenix/react';

const ObserverComponent = observe(WrappedComponent);
```

This enhanced component will subscribe to any observable property it receives when the component is mounted and automatically unsubscribe when the component is unmounted.

### Example

::: tip 
This example is available in [Github](https://github.com/status-im/phoenix/tree/master/examples/react)
:::


#### MyComponentObserver.js
```js
import React from "react";
import ReactDOM from 'react-dom';
import {observe} from "phoenix/react";

const MyComponent = ({eventData}) => {
  // Handle initial state when no data is available
  if (!eventData) {
    return <p>No data</p>;
  }
  
  return <p>{eventData.someReturnedValue}</p>
};

// MyComponent will now observe any observable prop it receives
// and update its state whenever the observable emits an event
export default observe(MyComponent);
```

#### App.js
```js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Phoenix from 'phoenix';

import MyComponentObserver from './MyComponentObserver';

class App extends Component {
  state = {
    myEventObservable$: null
  }

  async componentDidMount() {
    const MyContractInstance = ...; // TODO: obtain a web3.eth.contract instance

    const eventSyncer = new Phoenix("wss://localhost:8545"); // Use a valid websocket provider (geth, parity, infura...)
    await eventSyncer.init()
    
    const myEventObservable$ = eventSyncer.trackEvent(MyContractInstance, "MyEvent", {filter: {}, fromBlock: 1 });
    this.setState({ myEventObservable$ });
  }

  render() {
    return <MyComponentObserver eventData={this.state.myEventObservable$} />;
  }
}

export default App;
```

::: warning Handling Contract Objects
The variable `MyContractInstance` is a `web3.eth.Contract` object pointing to a deployed contract address. You can use a DApp framework like [Embark](https://embark.status.im/docs/contracts_javascript.html) to easily import that contract instance: `import { MyContract } from './embarkArtifacts/contracts';`, or use web3.js directly (just like in the example [source code](https://github.com/status-im/phoenix/blob/master/examples/react/src/MyContract.js#L36-L42))
:::

#### index.js
```js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
```