Skip to content
🏊 Material ripple effect. Ripples everything
TypeScript JavaScript
Branch: master
Clone or download
Rocky Wu
Rocky Wu fix ga
Latest commit ae0d5e0 Sep 9, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci fix gh-pages May 27, 2019
pages fix ga Sep 10, 2019
scripts Claen build files May 27, 2019
src fix #12 Aug 21, 2019
static rename assets to static May 30, 2019
.eslintignore v2 Switch to TypeScript May 27, 2019
.eslintrc Switch to @ts-mono/dev-react Aug 21, 2019
.gitattributes Set env for CI May 27, 2019
.gitignore v2 Switch to TypeScript May 27, 2019
LICENSE Initial commit Jun 4, 2016
README.md Update badges Aug 21, 2019
babel.config.js Switch to @ts-mono/dev-react Aug 21, 2019
jest.config.js v2 Switch to TypeScript May 27, 2019
next-env.d.ts Switch to @ts-mono/dev-react Aug 21, 2019
next.config.js Switch to @ts-mono/dev-react Aug 21, 2019
package.json fix ga Sep 10, 2019
prettier.config.js v2 Switch to TypeScript May 27, 2019
tsconfig.cjs.json 2.1.0 May 29, 2019
tsconfig.esm.json 2.1.0 May 29, 2019
tsconfig.json Switch to @ts-mono/dev-react Aug 21, 2019
yarn.lock fix ga Sep 10, 2019

README.md

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 can’t perform that action at this time.