https://github.com/rubencodes/react-css-blur

React Component for blurring an element using CSS filters.
https://github.com/rubencodes/react-css-blur

Last synced: 2 months ago
JSON representation

React Component for blurring an element using CSS filters.

• Host: GitHub
• URL: https://github.com/rubencodes/react-css-blur
• Owner: rubencodes
• License: mit
• Created: 2017-04-08T03:40:42.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-02-23T07:11:39.000Z (almost 7 years ago)
• Last Synced: 2024-10-28T14:59:26.563Z (3 months ago)
• Language: JavaScript
• Size: 85 KB
• Stars: 8
• Watchers: 1
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-css-blur [![npm version](https://badge.fury.io/js/react-css-blur.svg)](https://badge.fury.io/js/react-css-blur)

![Example](./example.gif)

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](http://caniuse.com/#feat=css-filters).

## Install

```

npm install --save react-css-blur

```

Then, in your React project:

```javascript

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

```

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

```javascript

import Blur from 'react-css-blur'

```

## How to Use

The `` 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

```javascript

class App extends React.Component {

  state = {

    blurOn: false

  };

  blurOn = (blurOn) => {

    this.setState({ blurOn });

  }

  render() {

    return (

      


        

          
 this.blurOn(true) }

            onMouseLeave={ () => this.blurOn(false) }>

            Hover Me

          

        

      

    );

  }

}

```


## Dependencies

None!

## License

MIT