Skip to content

React Component for blurring an element using CSS filters.

License

Notifications You must be signed in to change notification settings

rubencodes/react-css-blur

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-css-blur npm version

Example

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

About

React Component for blurring an element using CSS filters.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published