react-page-blur

Full page blur... every time, every browser, every circumstance.

Install

npm install react-page-blur --save

Usage

Simple:

<PageBlur active/>

Intermediate:

<PageBlur
  color='blue'
  opacity='0.8'
  onActive={this.pauseVideo}
  active
>
    <PaywallPopup />
</PageBlur>

Advanced:

<PageBlur
  image='/public/img/dark-watermark.gif'
  imageRepeat='no-repeat'
  imagePosition='center left'
  onOffClick={this.playSound}
  pulse
  active
/>

Props

Property	Type	Content	Default Value
active	boolean	Is the page blurred	false
color	string	Color of blur (color/hex/rgb)	'black'
opacity	number	Opacity of blur (0-1)	0.5
pulse	boolean	Pulsing effect of blur	false
image	string	background-image of blur	undefined
imageRepeat	string*	background-repeat of blur	repeat
imagePosition	string^	background-position	center
className	string	Any additional classes to add	''
onOffClick	function	Called if user clicks the blur but not a child	() => {}
onActive	function	Called once when activated	() => {}
offActive	function	Called once when unactivated from active	() => {}

*Acceptable string inputs are 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'

^Acceptable string inputs are explained on: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Development

npm install
npm run build
npm link
npm start