Novelty Palliates Malaise
Have opinions about JavaScript? We want to hear them. Take the 2018 JavaScript Ecosystem Survey »

react-bloom

1.0.18 • Public • Published

react-bloom

NPM JavaScript Style Guide

screenshot

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

Keywords

none

install

npm i react-bloom

Downloadsweekly downloads

82

version

1.0.18

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability