Issues implementing in react

[parryjos1]

I can't get this to work in react. Error that canvas has height of 0. Anyone had any luck?

[kamranahmedse]

Can you please provide a reproducing example on codesandbox?

[parryjos1]

Apologies for the styling & other errors, includes other attempts at trying to get it to work.l I am still relatively new to front end frameworks

`
import React, {Component} from 'react'
import './homepage.css';
import Brusher from 'brusher';

class Homepage extends Component {

constructor(props){
super(props)
this.state = {
changed: ''
}
}

componentDidMount(){

// const canvas = this.refs.canvas
// // const ctx = canvas.getContext("2d")
// <div>
//   <canvas ref="canvas" width={640} height={425} />
// </div>

this.brusher = new Brusher({
  image: 'portfolio-background.jpeg', // Path of the image to be used as a brush
  keepCleared: true,     // Put the blur back after user has cleared it
  stroke: 80,            // Stroke size for the brush
  lineStyle: 'round',    // Brush style (round, square, butt)
  autoBlur: false,       // Brusher will use the provided image for the blurry background
  autoBlurValue: 15,     // Blur strength in pixels
});

// this.runBrusher()

this.setState({changed: "changed"})

// this.brusher.init();
// brusher.init();
console.log('updated!');

}

// componentDidUpdate(){
// console.log('helllooooo');
// this.runBrusher();
// }

// componentDidMount() {
//   brusher.init()
// }

runBrusher = () => {
console.log('hello');
this.brusher.init();
}

render(){
return(

    {
      this.state.changed.length > 0
      ?
      <div>
      {this.runBrusher()}
      </div>
      :
      <div>nuppp</div>
    }

  {/*
            <div className="background"></div>
    <div className="inside-background">
        <h2>Welcome to the homepage</h2>
    </div>
  */}

  </div>
)

}
}

export default Homepage

`

[masonwang025]

For anyone looking at this thread in the future:
It doesn't work in React because the image fails to load (under loadSelectedImage()).
You can download and modify it so it says: this.image.src = require("./" + this.options.image);
Working demo here: MasonWang025/react-brusher
Just look under App.js for how to use my Brusher.js.