Minimal viable call for 3Box Spaces demo

App.js

import React from 'react';

const Box = require('3box');

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      heading: 'What If I Told You',
      backgroundColor: '',
      fontSize:'20px',                                              // Default values to display when no 3Box user settings loaded
      text: 'You Could Control Your Own Data??',                
      fontFamily: 'courier',                                          
      ethAddress: '0x531b92991c4EC8Bb18E39E6180aa2350e434C42D'
    };

    this.loadPublic = this.loadPublic.bind(this);
    this.UpdateEthAddress = this.UpdateEthAddress.bind(this);
  }

  async loadPublic() {
    // If you only need to display public space data for a user or multiple users in your application, you can use the static read-only get methods
    const spaceData = await Box.getSpace(this.state.ethAddress, 'spacesdemo')     // spacesdemo is the name used for this Apps 3Box Data Space

    this.setState({
      backgroundColor: spaceData.backgroundColor,               // Update the app with the 3Box space data
      fontSize: spaceData.fontSize
    })
  }

  UpdateEthAddress(event) {
    this.setState({ethAddress: event.target.value});
  }

  render(){

    return (
      <div style={{padding: '5px 100px'}}>
        <div style={{backgroundColor: this.state.backgroundColor}}>
          <div style={{fontFamily: this.state.fontFamily}}>
            <h1>{this.state.heading}</h1>
            <p style={{fontSize: this.state.fontSize}}>{this.state.text}</p>
          </div>
        </div>

        <hr></hr>
        <h3>Try Me</h3>
        <input type="text" value={this.state.ethAddress} onChange={this.UpdateEthAddress} placeholder="Ethereum Address"/>
        <button className="btn btn-primary" onClick={this.loadPublic}>Load Public Data</button>

      </div>
    )
  }
}

export default App;