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