Permalink
Fetching contributors…
Cannot retrieve contributors at this time
40 lines (25 sloc) 743 Bytes

<Ripple>

Creates Material Design ripple effect on click inside your element.

Usage

import {Ripple} from 'libreact/lib/Ripple';

<Ripple>
  <div style={{
    width: 300,
    height: 200,
  }}>
    foobar
  </div>
</Ripple>

Props

  • color — optional, string, ripple color.
  • ms — optional, number, animation time in milliseconds.

withRipple()

A higher order component that transforms plain DOM type elements into ones with ripple effects.

import {withRipple} from 'libreact/lib/Ripple';

const DivWithRipple = withRipple('div');
const ButtonWithRipple = withRipple('button', {ms: 1000, color: red});

As an optional second arguments accepts props to provide to <Ripple> component.