react-bloom v1.0.18

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