descent-ripple

Descent-Ripple

A highly customizable javascrip ripple animation for buttons. Made with Svelte, but easily usable with other frameworks.

Examples and usage

Getting started

Install the package from npm:

npm install descent-ripple

In Svelte you can easily use actions:

// MyButton.tsx
import React from 'react';
import ripple from 'descent-ripple';

export const MyButton = ()=>{
    const buttonRef = React.useRef<Node>(null);
     React.useEffect(()=>{
        if (buttonRef.current){
            let rippleOptions={};
            const buttonRipple = ripple(buttonRef.current,rippleOptions);
            return buttonRipple.destroy;
            
        }
    },[]);
    return (
        <button ref={buttonRef}>click me</button>
    )
}

For other frameworks see this blog post.