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