Skip to content
Branch: master
Go to file
Code

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.

You can’t perform that action at this time.