🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

React component for creating blurred backgrounds using canvas.

Core Java Script HTML5 Image Effects

Documentation

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.


You May Also Like