react-paper-ripple
v0.3.0
Published
Paper ripple animations inspired by Google Material Design.
Downloads
1,017
Maintainers
Readme
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
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 [email protected]: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/