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 (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2022-05-03T04:36:21.000Z (over 2 years ago)
• Last Synced: 2024-12-02T02:05:26.708Z (12 days ago)
• Topics: blur, design-tool, frontend, javascript, react
• Language: JavaScript
• Homepage: https://javier.xyz/react-blur/
• Size: 3.58 MB
• Stars: 463
• Watchers: 15
• Forks: 48
• Open Issues: 6
• 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)

README

        
# [React Blur](https://javier.xyz/react-blur/)

React component for creating blurred backgrounds using canvas.

[![react-blur](./website/public/react-blur.jpg)](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._