@intereact/ripple ·

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 | - |