No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.babelrc
.editorconfig
.eslintrc
.gitignore
README.md
package-lock.json
package.json
rollup.config.js
screenshot.gif

README.md

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