# descent-ripple

> A ripple animation overlay for buttons. Uses svg and is build with Svelte

Latest version **1.0.1** (published 2021-01-13) · 0 weekly downloads

## Install

```sh
npm install descent-ripple
pnpm add descent-ripple
yarn add descent-ripple
bun add descent-ripple
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-01-13 |
| First published | 2021-01-06 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 41.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | micha-lmxt |

## Links

- npm: https://www.npmjs.com/package/descent-ripple
- npm.io page: https://npm.io/package/descent-ripple

## Recent versions

- 1.0.1 (latest) — 2021-01-13
- 1.0.0 — 2021-01-11
- 0.3.2 — 2021-01-08
- 0.3.1 — 2021-01-07
- 0.2.1 — 2021-01-07
- 0.2.0 — 2021-01-07
- 0.1.2 — 2021-01-06
- 0.1.1 — 2021-01-06
- 0.1.0 — 2021-01-06

## README

# Descent-Ripple

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

[Examples and usage](https://gradientdescent.de/descent-ripple/)

### Getting started

Install the package from npm:

```javascript
npm install descent-ripple
```

In [Svelte](https://svelte.dev) you can easily use actions:

```javascript
// 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](https://gradientdescent.de/descent-ripple/).

---
_Source: https://npm.io/package/descent-ripple · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._