React component for blurred backgrounds.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
javierbyte Merge pull request #20 from vtsyganov/fix-resize-listener
Bug Fix: make resize method a prop in order to fix resize listner
Latest commit ee4e487 Mar 11, 2018

README.md

React Blur

styled with prettier

React component for creating blurred backgrounds using canvas.

Live demo

react-blur

Installation

npm install react-blur --save

Usage

var Blur = require('react-blur');

Example

<Blur img='/directory/img.jpg' blurRadius={5} enableStyles>
  The content.
</Blur>

For a complete example see the code in the demo branch.

Props

  • img: The image path.
  • blurRadius: Optional. The size of the blur radius.
  • enableStyles: Optional. Flag to include base styles inline, omit this to easily override.
  • shouldResize: Optional. If the canvas should re-render on resize? Defaults to true.
  • resizeInterval: Optional. How fast the canvas should re-render on resize? Defaults to 128ms.

Contributing

Please install yarn and use it to manage dependencies and the lockfile.

Thanks to Quasimodo for the original stack blur algorithm.