Package Exports

use-ripple-hook
use-ripple-hook/ripple.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-ripple-hook) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

useRipple - Material UI ripple effect

Fully customizable, lightweight React hook for implementing Google's Material UI style ripple effect

useRipple showcase GIF

Installation

npm install use-ripple-hook

yarn add use-ripple-hook

Usage

import React from "react";
import useRipple from "use-ripple";

function Button() {
    const [ripple, event] = useRipple();

    return (
        <button ref={ripple} onMouseDown={event}>
            Default Ripple
        </button>
    );
}

Options

Default options

useRipple({
    duration: 450,
    color: "rgba(255, 255, 255, .3)",
    cancelAutomatically: false,
    timingFunction: "cubic-bezier(.42,.36,.28,.88)",
    disabled: false,
    ref: internalRef,
    onSpawn: undefined,
});

Options reference

Property	Description	Type	Default	Optional
`duration`	Duration in milliseconds of the ripple effect	`number`	`450`	✔️
`color`	Color of the ripple effect	`string`	`rgba(255, 255, 255, .3)`	✔️
`cancelAutomatically`	If true, the ripple will begin to cancel after 40% of the duration	`boolean`	`false`	✔️
`timingFunction`	Transition timing function of the transform animation	`string`	`cubic-bezier(.42,.36,.28,.88)`	✔️
`disabled`	If true, no ripple will be spawned	`boolean`	`false`	✔️
`ref`	Optional outside ref, if unset, internal ref will be used	`React.RefObject<T>`	`undefined`	✔️
`onSpawn`	A callback which is triggered when a ripple is spawned	options.onspawn	`undefined`	✔️

`options.onSpawn`

Type

type OnSpawnCB = (ctx: {
    /** the ripple element */
    readonly ripple: HTMLDivElement;

    /** cancels the current ripple animation */
    readonly cancelRipple: () => void;

    /** the ref to the ripple host element */
    readonly ref: React.RefObject<T>;
    
    /** the event that triggered the ripple (ts: casting required) */
    readonly event: unknown;
}) => void;

Example

useRipple({
    /* ... */
    onSpawn: ({
      ripple, ref, event  
    }) => {
        console.table({ ripple, ref, event });
    }
});

Perfect circle

As demonstrated in the below GIF, useRipple adjusts the circle size according to always fir the host element's box. useRipple showcase GIF

Examples

For examples of useRipple usage please click here.

Contributing

Contributions of any form are appreciated, opening issues on the Github as well as creating pull requests are both welcome for anyone.