1.1.13 • Published 1 year ago
@leafygreen-ui/ripple v1.1.13
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
1.1.13
1 year ago
2.0.0-alpha.0
2 years ago
2.0.0-alpha.1
2 years ago
1.1.12
2 years ago
1.1.11
2 years ago
1.1.10
2 years ago
1.1.9
2 years ago
1.1.8
2 years ago
1.1.7
3 years ago
1.1.6
3 years ago
1.1.5
3 years ago
1.1.4
3 years ago
1.1.4-next.2
3 years ago
1.1.4-next.0
3 years ago
1.1.4-next.1
3 years ago
1.1.4-test.0
3 years ago
1.1.3
3 years ago
1.1.2
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.0
4 years ago