React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by michael_t

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

#innerTarget {
  background-color: blue;
}

Babel + JSX

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }


  componentDidMount() {
    console.log("here");

    html2canvas(document.getElementById("target"), {
      onrendered: function (canvas) {

        var base64image = canvas.toDataURL("image/png");
        document.body.appendChild(canvas);
        this.setState({canvas: canvas} );
      },
      width:320,
      height:220
    }).bind(this);


/*     html2canvas(document.getElementById("target"), {
        onrendered: function (canvas) {
            
          var base64image = canvas.toDataURL("image/png");
          document.body.appendChild(canvas);
          this.setState({canvas: canvas});
        },
        width:320,
        height:220
    }).bind(this);
     */   	
    var getPosition = function(e) {
  		var rect = e.target.getBoundingClientRect();
    	var x = e.clientX - rect.left;
    	var y = e.clientY - rect.top;
    
    	return {
    		x, y
    	}
  	}
    
    var getPixelColours = function(pos) {
    	var ctx = this.state.canvas.getContext("2d");
   	 	var data = ctx.getImageData(pos.x, pos.y, 1, 1).data;
      console.log(data);
    }
    
    var printPosition = function(e) {
  		var position = getPosition(e);
/*       getPixelColours(position);
       */    	console.log(position.x + " " + position.y);
  	}
   
    document.getElementById('target').addEventListener('click', printPosition);
  }

  render() {
    return (
    	<div id="target">
        Hello {this.props.name}
        <div id="innerTarget">Testing</div>
      </div>);
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);