const React = require('react');
const DrawableCanvas = require('react-drawable-canvas');
 
const App = React.createClass( {
 render() {
   return (
     <div>
       <DrawableCanvas />
     </div>
   );
 }
});
 
module.exports = App;

{
  brushColor: '#000000',
  lineWidth: 4,
  canvasStyle: {
    backgroundColor: 'FFFFFF'
  },
  clear: false
}
 

const App = React.createClass( {
 
  getInitialState() {
    return {
      brushColor: '#800909',
      lineWidth: 4,
      canvasStyle: {
        backgroundColor: '#00FFDC'
      },
      clear: false
    };
  },
 
  handleOnClickClear() {
    this.setState({
      clear: true
    });
  },
 
  handleOnClickChangeColorYellow() {
    this.setState({
      brushColor: '#ffff00',
      clear: false
    });
  },
 
  handleOnClickChangeColorRed(){
    this.setState({
      brushColor: '#800909',
      clear: false
    });
  },
 
  render() {
    return (
      <div>
        <DrawableCanvas {...this.state} />
        <button onClick={this.handleOnClickClear}>Clear all</button>
        <button onClick={this.handleOnClickChangeColorYellow}>Set color to Yellow</button>
        <button onClick={this.handleOnClickChangeColorRed}>Set color to Red</button>
      </div>
    );
  }
 
});
 
module.exports = App;