1.1.1 • Published 7 years ago

@intereact/ripple v1.1.1

Weekly downloads
42
License
MIT
Repository
github
Last release
7 years ago

@intereact/ripple · npm.io Build Status Coverage Status npm.io

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

PropertyDescriptionTypeDefault
childrenA render function(ripples) => node-
enterDurationSet the duration (in ms) of the enter transitionnumber400
exitDurationSet the duration (in ms) of the exit transitionnumber400
sizeSet the ripple size'cover' | 'contain' | number'cover'
colorSet the ripple colorstring'rgba(255,255,255,0.2)'
centerIf true, ripples always appear at the center of the surfacebooleanfalse
renderScaleImprove performance by rendering ripples at a lower resolutionnumber1
classNameSet the ripple container classnamestring-
rippleClassNameSet the ripple classnamestring-
styleOverride ripple container inline stylesobject-
rippleStyleOverride ripple inline stylesobject-
1.1.1

7 years ago

1.1.0

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago

0.0.9

7 years ago

0.0.8

7 years ago

0.0.7

7 years ago

0.0.6

7 years ago

0.0.4

7 years ago

0.0.3

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago