Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-ripples with all npm packages installed. Try it out:

var reactRipples = require("react-ripples")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-ripples v2.2.1

The ripple effect. Ripples everywhere

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)',
}
PropertyDescription
duringThe css animate duration [ms]
colorThe ripple's background color

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free