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

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

This example is available in Github

MyComponentObserver.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

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 to easily import that contract instance: import { MyContract } from './embarkArtifacts/contracts';, or use web3.js directly (just like in the example source code) :::

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

2.5 KiB Raw Blame History