React Ripples

– Ripple effect, ripples everywhere

Works with Bootstrap buttons

_jsx

import Ripples from 'react-ripples'

<Ripples>
  <button type="button" className="btn btn-primary">
    Primary
  </button>
</Ripples>

Copy

Change color and during

_jsx

<Ripples color="#fff" during={1200}>
  <button type="button" className="btn btn-outline-primary">
    Primary
  </button>
</Ripples>

Copy

The normal text content

Ripple touch effect was introduced with material design in Android 5.0 (API level 21). Touch feedback in material design provides an instantaneous visual confirmation at the point of contact when users interact with UI elements. For example, buttons now display a ripple effect when they are touched-this is the default touch feedback animation in Android 5.0. Ripple animation is implemented by the new RippleDrawable class. The ripple effect can be configured to end at the bounds of the view or extend beyond the bounds of the view.

Ripples with any shape

For example: a radius button

_jsx

<div
  style={{
  display: 'inline-flex',
  borderRadius: 25,
  overflow: 'hidden',
}}
>
  <Ripples color={'yellow'}>
  <button type="button" className="btn btn-primary">
    Primary
  </button>
  </Ripples>
</div>

Copy

API

createRipples([defaultProps])

You can easy to extend default props without HOC.

_jsx

import { createRipples } from 'react-ripples'

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

Copy