Neutered Paranoid Meerkat

    @intereact/ripple
    TypeScript icon, indicating that this package has built-in type declarations

    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

    64

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    16.4 kB

    Total Files

    4

    Last publish

    Collaborators

    • davidstromback