react-bloom

React component that gives you a "blooming" effect when you click/tap. Easy to use, and customize.

Demo

https://wle8300.github.io/react-bloom

Install

npm install --save react-bloom

Usage

import React, { Component } from 'react'
 
import ReactBloom from 'react-bloom'
 
class Example extends Component {
  render () {
    return (
      <Foo>
        <ReactBloom
          bloomSize={75}
          backgroundColor="#5ebfff"
          opacity={0.3}
        />
      </Foo>
    )
  }
}

API

• bloomSize [PropTypes.number] Pixel units. Default 100
• animationMs [PropTypes.number] Milliseconds for bloom expansion
• disappearCompound [PropTypes.number] Multiplier for fade. If "animationMs" is 850ms, and "disappearCompound" is 2, the fadeaway duration will be 1700ms
• backgroundColor [PropTypes.string] Takes standard web color strings (ex: hex, rgba, hsl, etc)
• opacity [PropTypes.number] The opacity of the bloom. Default is 0.5
• transitionTiming [PropTypes.string] Like "linear", "cubic-bezier(0.215, 0.61, 0.355, 1)", "ease-in", etc. Default is "cubic-bezier(0.215, 0.61, 0.355, 1)"
• style [PropTypes.object] Standard React style objects

License

MIT © wle8300