javierbyte / react-blur Goto Github PK

View Code? Open in Web Editor NEW

451.0 15.0 48.0 3.67 MB

React component to blur image backgrounds using canvas.

Home Page: https://javier.xyz/react-blur/

License: BSD 3-Clause "New" or "Revised" License

JavaScript 84.63% HTML 15.27% Shell 0.11%

react javascript frontend blur design-tool

react-blur's Introduction

React Blur

React component for creating blurred backgrounds using canvas.

Installation

npm install react-blur --save

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.

react-blur's People

Contributors

Stargazers

Watchers

react-blur's Issues

componentWillReceiveProps should not re-blur image unless props changed

Hi javierbyte,

    componentWillReceiveProps(nextProps) {
        stackBlurImage(this.img, this.canvas, nextProps.blurRadius, this.width, this.height);
    },

This is quite a waste, as you don't check if the props actually change. Perhaps this should be done in componentWillUpdate - or just check if the props changed?

SVG?

Any future plan for SVG?

[Attorney] add-a-case (party) screen

Cannot resolve module 'react-addons-pure-render-mixin'

ERROR in ./~/react-blur/dist/blur.js
Module not found: Error: Cannot resolve module 'react-addons-pure-render-mixin' in /Users/../node_modules/react-blur/dist
 @ ./~/react-blur/dist/blur.js 9:22-63

I think your component isn't compatible with new versions of React. Can you update it or guide me to fix it ?

Blob Support

React Warning; unknown props on div

Hi, I'm getting the following warning when using this component:

Warning: Unknown props blurRadius, img, resizeInterval, onLoadFunction on <div> tag. Remove these props from the element

Due to the spread operator in the final div. Is there anything I can do on my end to avoid this error? thanks!

Typescript support

Typescript support by adding an interface in Definitely Typed?

Canvas to match Parent width / height

<div style={width: 900px}>
    <Blur style={{width: "100%"}} img={url}></Blur>
</div>

<div style={width: 500px}>
    <Blur style={{width: "100%"}} img={url}></Blur>
</div>

<div style={width: 300px}>
    <Blur style={{width: "100%"}} img={url}></Blur>
</div>

<div style={width: 100px}>
    <Blur style={{width: "100%"}} img={url}></Blur>
</div>
Error:
StackBlur.js:83 Uncaught Error: unable to access image data: IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source height is 0.