@leafygreen-ui/ripple NPM

Ripple

npm (scoped)

Installation

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`