Natural Pleistocene Monsters
Miss any of our Open RFC calls?Watch the recordings here! »

@intereact/ripple

1.1.1 • Public • Published

@intereact/ripple · Build Status Coverage Status

Adds a ripple effect to a React component. Each time the element is pressed, a ripple originates from the mouse position and scales to cover the entire element. When the mouse is released, the ripple fades away.

DEMO

Features

  • Only 2 dependencies: React and React DOM
  • Supports multiple ripples at once
  • Can dynamically scale ripples to cover or be contained within the surface
  • Ripples can be rendered at a lower resolution to improve performance

Installation

npm install --save @intereact/ripple

Usage

import Ripple from '@intereact/ripple'

<Ripple>
    { (ripples) => (
        <button style={{ position: 'relative' }}>
            { ripples }
            Click me
        </button>
    ) }
</Ripple>

Props

Property Description Type Default
children A render function (ripples) => node -
enterDuration Set the duration (in ms) of the enter transition number 400
exitDuration Set the duration (in ms) of the exit transition number 400
size Set the ripple size 'cover' | 'contain' | number 'cover'
color Set the ripple color string 'rgba(255,255,255,0.2)'
center If true, ripples always appear at the center of the surface boolean false
renderScale Improve performance by rendering ripples at a lower resolution number 1
className Set the ripple container classname string -
rippleClassName Set the ripple classname string -
style Override ripple container inline styles object -
rippleStyle Override ripple inline styles object -

Install

npm i @intereact/ripple

DownloadsWeekly Downloads

114

Version

1.1.1

License

MIT

Unpacked Size

16.4 kB

Total Files

4

Last publish

Collaborators

  • avatar