react-ripples

react-ripples

<img src="https://img.shields.io/circleci/build/github/rwu823/react-ripples/master?style=for-the-badge&logo=circleci" />

<img src="https://img.shields.io/npm/v/react-ripples?style=for-the-badge&logo=npm"/>

<img src="https://img.shields.io/codecov/c/github/rwu823/react-ripples/master?style=for-the-badge&logo=codecov"/>

_{Material ripple effect, ripples everywhere}

Live Demo

Attraction

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

Installation

$ npm install --save react-ripples

$ yarn add react-ripples

Usage

import Ripples from 'react-ripples'

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

API

createRipples(defaultProps)

import { createRipples } from 'react-ripples'

const MyRipples = createRipples({
  color: 'purple',
  during: 2200,
})

Props

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

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