Show HN: React component for blurred backgrounds

Nice work!

I noticed that you're caching `this` as a variable:

  var Blur = this,

And it looks like you're doing so to avoid scope problems in anonymous functions:

  Blur.img.onload = function(){
      stackBlurImage( Blur.img, Blur.canvas, blurRadius, Blur.width, Blur.height)
  };

I personally don't like this style. It makes it harder to read the code. If someone misses that `var Blur = this` line, they could get confused and either not use it, or use it incorrectly.

Instead, since you're using ES6, I suggest using the fat arrow:

  this.img.onload = () => {
    stackBlurImage(this.img, this.canvas, blurRadius, this.width, this.height);
  };

(I'm used to writing Coffeescript instead of ES6, so sorry if minor syntax details are wrong.)

This is largely a stylistic choice. You can feel free to do things however you want, and if it works, it works. But generally I prefer to make sure things are really clear, and that the Javascript features aren't obscured.

Does this need to be a canvas-scribbling React component when you can do this with better performance using a couple of lines of CSS filters?

Is there some advantage I'm missing?

Nice work.

Suggestion: Add support for frosted glass since it's an easy extension.

You would only need another parameter for an RGBA color for "tint". Then draw over the blurred area with this color.

For example, setting tint to rgba(255,255,255,0.15) will look like the iOS style frosted effect. Varying the rgb and alpha can show other interesting options.

I'm not smart enough to know how good the performance is on this. Decent? Better than CSS?

Thanks for the contribution! Minor point: It would be nice if the demo's slider would be draggable on mobile, iOS Safari can't see it in action.

Eaaaa el niño! :D

...