rubencodes / react-css-blur

React Component for blurring an element using CSS filters.

react-css-blur

A React component that uses CSS filters to apply a blur to any DOM element. CSS Filters are currently supported by most modern browsers. See up-to-date compatibility info here.

Install

npm install --save react-css-blur

Then, in your React project:

var Blur = require('react-css-blur');

Or, if you're using ES6/ECMA2015 syntax:

import Blur from 'react-css-blur'

How to Use

The <Blur /> component accepts two props:

• radius: a size value in any CSS units (e.g. 5px). Default value: 0.
• transition: a time value in any CSS units (e.g. 500ms). Default value: 0.

Example

class App extends React.Component {
  state = {
    blurOn: false
  };

  blurOn = (blurOn) => {
    this.setState({ blurOn });
  }

  render() {
    return (
      <div id="App">
        <Blur radius={ this.state.blurOn ? '5px' : '0' } transition="400ms">
          <h1
            onMouseEnter={ () => this.blurOn(true) }
            onMouseLeave={ () => this.blurOn(false) }>
            Hover Me
          </h1>
        </Blur>
      </div>
    );
  }
}

Dependencies

None!

License

MIT

react-css-blur's Issues

Create ugly white borders around background image

not sure how it's related to css blur

Webkit style error

warning.js?6327:35 Warning: Unsupported style property -webkit-filter. Did you mean WebkitFilter? Check the render method of ComponentName``

You need to change it to WebkitFilter