tungv/rippl

React ripple effect on any element

Ripple effect for React

This works with any type of element, from <div />, <button /> to <tr /> or <td />. Server-side rendering works fine too.

Demo: https://codesandbox.io/s/k5vo27469r

1. Installation

npm i rippl

# or

yarn add rippl

2. Usage

Example 1: wrap a button

import Ripple from 'rippl'

<Ripple>
  <button>click me</button>
</Ripple>

Example 2: wrap a table row

import Ripple from 'rippl'

<table>
  <tbody>
    {rows.map(row => (
      <Ripple key={row.id}>
        <tr>
          <td>{row.firstName}</td>
          <td>{row.lastName}</td>
        </tr>
      </Ripple>
    ))}
  </tbody>
</table>

Props

prop	type	descriptions
children	React Element, only one child accepted	the target element
disabled	Boolean? (default undefined)	when set to true, no ripple effect applied
onClick	Function? (default undefined)	when onClick is a function, it's called at the moment ripple effect starts
rounded	Boolean? (default undefined)	when set to true, ripple effect is "captured" within a circular area

Road map

• add duration props
• add color prop