# @vuemod/vue-touch-ripple

> Ripple directive for vue 3

Latest version **1.1.3** (published 2022-05-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vuemod/vue-touch-ripple
pnpm add @vuemod/vue-touch-ripple
yarn add @vuemod/vue-touch-ripple
bun add @vuemod/vue-touch-ripple
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2022-05-22 |
| First published | 2022-04-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 18.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | webigorkiev |
| Maintainers | webigorkiev |
| Keywords | vue3, ripple, vue-ripple, vue-swipe-ripple, animations |

## Links

- npm: https://www.npmjs.com/package/@vuemod/vue-touch-ripple
- Homepage: https://github.com/webigorkiev/vue-touch-ripple#readme
- Issues: https://github.com/webigorkiev/vue-touch-ripple/issues
- npm.io page: https://npm.io/package/@vuemod/vue-touch-ripple

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.1.3 (latest) — 2022-05-22
- 1.1.2 — 2022-04-13
- 1.1.1 — 2022-04-12
- 1.0.5 — 2022-04-12
- 1.0.4 — 2022-04-12
- 1.0.3 — 2022-04-12
- 1.0.2 — 2022-04-11
- 1.0.1 — 2022-04-11

## README

# @vuemod/vue-touch-ripple

Ripple directive for vue 3

### Documentation and Demo

[vue-touch-ripple docs](https://webigorkiev.github.io/vue-touch-ripple-docs/)

## Installation

```bash
yarn add @vuemod/vue-touch-ripple
```

### Add directive to your component

```vue
<template>
    <div v-touch-ripple.passive>Test Button</div>
    <div v-touch-ripple:swipe.once.800="isFireEffect">Test Button</div>
</template>

<script lang="ts">
    import {defineComponent} from "vue";
    import {touchRipple} from "@vuemod/vue-touch-ripple";

    export default defineComponent({
        name: "App",
        directives: {
            touchRipple
        },
        data() {
            return {
                isFireEffect: true
            }
        }
    });

</script>
```

### Effects

* Currently, implemented 2 effects: **click** and **swipe**, see docs. (Default - tap)
* You can set animation duration as modifier, like: v-touch-ripple:swipe.once.**800** (in ms)
* Your can switch on or off effect by param v-touch-ripple:tap="isFireEffect"

### Options

The directive automatically adds styles to the header with the vue-touch-ripple-styles id,
which can be changed in the settings. You can also change the default duration of the effect.
Keep in mind that for the swipe mode you need more long interval.

For use with custom options you need **defineTouchRipple**

```vue
<template>
    <div v-touch-ripple:tap>Test Button</div>
    <div v-touch-ripple:swipe.passive>Test Button</div>
</template>

<script lang="ts">
    import {defineComponent} from "vue";
    import {defineTouchRipple} from "@vuemod/vue-touch-ripple";

    export default defineComponent({
        name: "App",
        directives: {
            touchRipple: defineTouchRipple({duration: 0.5})
        }
    });

</script>
```

### Classes

* v-touch-ripple - Host element
* v-touch-ripple-paint - Ripple element
* v-touch-ripple-paint-extension - Ripple element during animating default
* v-touch-ripple-paint-swipe - Ripple element during animating in swipe mode

[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](CODE_OF_CONDUCT.md)

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