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