useRipple

Hook that generates positions and sizes of "ripples", allows you to easily recreate material UI ripple effect.

Returns array of objects containing width, height, left and top style properties for each ripple, and onClick function that generates ripples.

Also includes ripple animation and default styles for ripple parent and ripple. You can use these styles (don't forget to specify ripple background-color yourself) or make your own, just be sure to adjust the duration parameter of useRipple hook if your custom animation has different duration.

Usage

Usage with default styles

import "use-ripple/index.css" // import this for ripple styles

const App = () => {
  const { styles, onClick } = useRipple();

  return (
    <button className="ripple-parent" onClick={onClick}>
      Ripple
      {styles?.map((style, index) => (
        <span key={index} className="ripple ripple-color" style={style} />
      ))}
    </button>
  );
};

Create css class for background color of ripple, or use something else to apply your preffered color.

.ripple-color {
  background-color: blue;
}

Usage with custom styles

Provide your animation duration in ms as parameter to useRipple if you use animation with duration different than the default duration (600ms). Also for ripples to render properly, parent node position must be relative and overflow has to be hidden and position of the ripple node must be absolute.

const { styles, onClick } = useRipple({ duration: CUSTOM_ANIMATION_DURATION })

Usage with onClick handler

const { styles, onClick } = useRipple();
const handleClick = (e) => {
  doSomething();
  onClick(e)
}

or pass click handler to useRipple and use returned value

const handleClick = (e) => {
  doSomething();
}
const { styles, onClick } = useRipple({ handleClick });

return <button onClick={onClick} ...

Props

name	type	default	description
duration	number	600	duration of ripple animation in miliseconds
limit	number	100	maximum number of ripples to render (each click renders new ripple), use negative value for unlimited number of ripples
handleClick	MouseEventHandler	undefined	onClick handler of component that renders ripple, it will be wrapped in onClick function returned from useRipple

Return value

name	type	description
styles	Pick<CSSProperties, "width" | "height" | "left" | "top">[]	size and position for each ripple
onClick	MouseEventHandler	onClick handler that generates ripples