🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A react component used to create Material Design inspired ripple effect on any elements.

Animation React

Documentation

react-ripples

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

or

$ yarn add react-ripples

Usage

import Ripples from 'react-ripples'  render() {   <Ripples>     <button>Ripple Button</button>   </Ripples> }

API

createRipples([defaultProps])

Extends default props without HOC

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)', }
Property Description
during The css animate duration [ms]
color The ripple's background color

You May Also Like