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' { return <Foo> <ReactBloom = ="#5ebfff" = /> </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