ripple

Ripple

Installation

PNPM

pnpm add @leafygreen-ui/ripple

Yarn

yarn add @leafygreen-ui/ripple

NPM

npm install @leafygreen-ui/ripple

Example

import { registerRipple } from '@leafygreen-ui/ripple';

// JavaScript Example
const button = document.querySelector('#my-button');
const buttonOptions = {
  variant: 'danger',
  darkMode: false,
};

registerRipple(button, buttonOptions);

// React Example
function Button({ options }) {
  const ref = React.useRef(null);

  useEffect(() => {
    if (ref.current) {
      registerRipple(ref, options);
    }
  }, [ref, options]);
}

Arguments

Argument	Type	Description	Default
ref	HTMLElement	HTMLElement that ripple effect should be applied to
options		Options that specify coloring and size of ripple
options.variant	'primary', 'info', 'default', 'danger', 'secondaryDanger'	Determines color of ripple effect
options.darkMode	boolean	Determines if the ripple effect will be rendered in dark mode	false

NOTE: In order for this to work as expected, the target element must have the property overflow:hidden set