Material ripple effect with react.js

React Ripples.The ripple effect. Ripples everywhere.

Attraction

• ✅ Zero dependencies
• 🚀 Tiny and blazing fast (Pure Component)
• ⚡ Typescript and definition file supported
• 🌍 SSR supported

Installation

$ npm install --save react-ripples

or

$ yarn add react-ripples

Usage

import Ripples from 'react-ripples'

render() {
  <Ripples>
    <button>Ripple Button</button>
  </Ripples>
}

API

Props

static propTypes = {
  during: PropTypes.number,
  color: PropTypes.string,
}

static defaultProps = {
  during: 600,
  color: 'rgba(0, 0, 0, .3)',
}

Property	Description
during	The css animate duration [ms]
color	The ripple’s background color

GitHub

Author: rwu823

Live Demo: https://rwu823.github.io/react-ripples/

GitHub: https://github.com/rwu823/react-ripples

#reactjs #javascript