svelte-taphold Svelte Themes

Svelte Taphold

A simple handle tap and hold action for Svelte/SvelteKit.

Svelte Tap Hold

Minimalistic tap and hold component for Svelte/SvelteKit.

Installation

// Using Yarn to install
yarn add --dev svelte-taphold

// or if you prefer NPM
npm install --save-dev svelte-taphold

Usage Sample

<script>
  import { taphold } from 'svelte-taphold'

  let ticks = 0 // show how many ticks button has been hold
  let interval = 100

  const onTapHold = () => ticks++
  const reset = () => ticks = 0
</script>

<h1>Tap and Hold {ticks}x</h1>
<label for="interval">Interval</label>
<input
  id="interval"
  placeholder="interval"
  bind:value={interval}
  type="number"/>

<!-- svelte-taphold on button -->
<button
  use:taphold={interval}
  on:taphold={onTapHold} >
  Tap and Hold
</button>

<button on:click={reset}>Reset Iteration</button>

Top categories

Loading Svelte Themes