function bits(n){
  var res = [];
  while(n){
    res.push(n & 1);
    n >>= 1;
  }
  return res;
}

class App extends React.Component {
  constructor(){
    super();
    this.state = {buttons: 0};
  }

  render(){
    const preventDefault = (e) => { e.preventDefault() }
    const handleChange = (e) => {
      preventDefault(e);
      this.setState({buttons: e.buttons});
    };

    var names = [
      'Left', 'Right', 'Middle', 'Back', 'Forward'
    ];

    // buttons is a bitmask
    var pad = "00000";
    var buttons = bits(this.state.buttons).concat([0, 0, 0, 0, 0]).slice(0, names.length);

    var active = buttons.map((x, i) => {
      return <div>{names[i]}: {x === 1 ? 'Yes' : 'No'}</div>;
    });


    return (
      <section
        onContextMenu={preventDefault}
        onMouseDown={handleChange}
        tabIndex={-1}>
        <div>
          <h4>Buttons: {this.state.buttons} ({buttons.join('')})</h4>
          {active}
        </div>
      </section>
    );
  }
}

React.render(<App />, document.body);