
Show HN: React component for blurred backgrounds - javierbyte
https://github.com/javierbyte/react-blur
======
morley
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.

~~~
simplify
> It makes it harder to read the code

I think it makes it _much easier_ to read the code. Assigning it to a variable
gives a nice, short description of what you're actually working with.

~~~
lfuller
By using arrow functions it's simply implied that the top level context is
always being used. You don't have to define what "this" is, since it's always
"this".

------
fitter
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?

~~~
javierbyte
Author here. As far as I know there is no way to do blur with CSS in IE10+
[https://github.com/Schepp/CSS-Filters-Polyfill#a-word-
regard...](https://github.com/Schepp/CSS-Filters-Polyfill#a-word-regarding-
ie-10) so we must use canvas to be cross-browser.

~~~
spdustin
You can. SVG Filters are supported.

[http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-
eff...](http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-
ie10.aspx)

Edit: to clarify, the image would need to be moved into the SVG (which could
be a simple DOM manipulation of the original <img> tag).

~~~
fitter
Hm, if that's the case, then theoretically this component can be easily
improved to support _any_ DOM container (not just images) by just polyfilling
filter: with native or SVG.

~~~
spdustin
I dunno about that. <img> has a pretty direct analog in SVG that you could
create by adding it (and the SVG container) to the DOM in script. Arbitrary
markup would probably be best to render into a canvas.

Of course, you could always just force IE9 mode... ;)

------
WhitneyLand
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.

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

------
untilHellbanned
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.

~~~
javierbyte
Sure! Fixing right now.

------
escusado
Eaaaa el niño! :D

------
flockflock
...

