@leafygreen-ui/ripple
v1.1.15
Published
leafyGreen UI Kit Ripple
Downloads
276,771
Keywords
Readme
Ripple
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
|
NOTE: In order for this to work as expected, the target element must have the property overflow:hidden
set