React Blur

React component for creating blurred backgrounds using canvas.

Installation

pnpm add react-blur

Usage

import Blur from "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

Thanks to Quasimodo for the original stack blur algorithm.