Function that generates a UX ripple in any element. Demo
Install with npm
npm install --save https://github.com/josh-minkler/ux-ripple.git
Simply call the uxRipple
function to create a ripple.
import uxRipple from 'ux-ripple';
uxRipple(event, element, options);
You must pass an event or an element to the uxRipple
function so it knows where to put the ripple.
-
If you pass an element, it will put the ripple inside that element
-
If you pass an event, it will put the ripple inside the element the event was attached to
-
If you pass both, it will put the ripple inside the element, but position it based on the events' mouse position
// Usage with an event
myElement.addEventListener('click', uxRipple);
myElement.addEventListener('click', function(e) { uxRipple(e); // Your code for handling a click });
// If you pass an event with no mouse position, // it will ripple from the center of the element. myElement.addEventListener('focus', uxRipple);
// Usage with an element
// This will ripple from the center of myElement uxRipple(null, myElement);
// You can also pass both an event and an element
myElement.addEventListener('click', function(e) { uxRipple(e, anotherElement); });
Vigor: Determines how vigorously your element ripples. Should be an integer from 1 to 10. Default is 5.
Inverted: Inverts the ripple when true
. Default is false
.
uxRipple(event, element, { vigor: 5, inverted: false });
In unsupported browsers, calling uxRipple()
will simply do nothing.
Supported in all browsers that support CSS transitions. Internet explorer 10+
View support on caniuse