https://github.com/javierbyte/react-blur
React component to blur image backgrounds using canvas.
https://github.com/javierbyte/react-blur
blur design-tool frontend javascript react
Last synced: 5 days ago
JSON representation
React component to blur image backgrounds using canvas.
- Host: GitHub
- URL: https://github.com/javierbyte/react-blur
- Owner: javierbyte
- License: bsd-3-clause
- Created: 2015-03-05T04:13:58.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2022-05-03T04:36:21.000Z (almost 3 years ago)
- Last Synced: 2025-04-03T21:13:20.487Z (14 days ago)
- Topics: blur, design-tool, frontend, javascript, react
- Language: JavaScript
- Homepage: https://javier.xyz/react-blur/
- Size: 3.58 MB
- Stars: 464
- Watchers: 14
- Forks: 49
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components-all - react-blur - React component for blurred backgrounds. (Uncategorized / Uncategorized)
- awesome-react-components - react-blur - React component for blurred backgrounds. (UI Components / Miscellaneous)
- awesome-list - react-blur - React component for blurred backgrounds. (Demos / Miscellaneous)
- awesome-react-components - react-blur - React component for blurred backgrounds. (UI Components / Miscellaneous)
- awesome-react-components - react-blur - React component for blurred backgrounds. (UI Components / Miscellaneous)
- awesome-react-components - react-blur - React component for blurred backgrounds. (UI Components / Miscellaneous)
- fucking-awesome-react-components - react-blur - React component for blurred backgrounds. (UI Components / Miscellaneous)
- awesome-react-components - react-blur - React component for blurred backgrounds. (UI Components / Miscellaneous)
- awesome-react-components - react-blur - React component for blurred backgrounds. (UI Components / Miscellaneous)
README
# [React Blur](https://javier.xyz/react-blur/)
React component for creating blurred backgrounds using canvas.
[](https://javier.xyz/react-blur/)
## Installation
```js
npm install react-blur --save
```## Usage
```js
import Blur from "react-blur";
```### Example
```jsx
The content.
```
For a complete example see the code in the [demo branch](https://github.com/javierbyte/react-blur/blob/gh-pages/src/js/app.jsx).
#### 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](http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html) for the original stack blur algorithm._