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

::: tip 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