react-paper-ripple

React Paper Ripple

Paper ripple animations inspired by Google Material Design.

Install

npm install react-paper-ripple --save

<script src="https://unpkg.com/react-paper-ripple/dist/react-paper-ripple.js"></script>
(UMD library exposed as `ReactPaperRipple`)

Example

Codepen Demo

import PaperRipple from 'react-paper-ripple'

class App extends Component {
  render() {
    return (
      <section>
        <PaperRipple color="#f55c03" center className="btn btn-circle btn-red">
          <i className="icon fa fa-bomb"/>
        </PaperRipple>
        <PaperRipple color="#03c8f5" center className="btn btn-circle btn-blue">
          <i className="icon fa fa-diamond"/>
        </PaperRipple>
        <PaperRipple color="#f55c03" center className="btn btn-circle btn-red">
          <i className="icon fa fa-hand-peace-o "/>
        </PaperRipple>
      </section>
    )
  }
}

Props

tag: PropTypes.string

The wrapping element around your element. Defaults to div. Any other valid props like className will be passed to this element.

color: PropTypes.string

The color of the wave. Passed as backgroundColor to private Wave component.

opacity: PropTypes.number

The opacity of the waves container.

growRatio: PropTypes.number

The amount the wave should grow compared to the biggest axis of the element.

center: PropTypes.number

Position the wave in the center of the element.

rmConfig: React.PropTypes.objectOf(React.PropTypes.number)

Pass in any valid React Motion config object.

Running Locally

clone repo
git clone git@github.com:souporserious/react-paper-ripple.git
move into folder
cd ~/react-paper-ripple
install dependencies
npm install
run dev mode
npm run dev
open your browser and visit: http://localhost:8080/