@svelte-put/swipeable

Svelte action use:swipeable - event for setting up quick gestures on an element (swipe right to delete, for example).

svelte-put

This package is part of the @svelte-put family. For contributing guideline and more, refer to its readme.

Usage & Documentation

See the dedicated documentation page here.

Quick Start

<script lang="ts">
  import { swipe } from '@svelte-put/swipeable';

	const items = $state([1, 2, 3, 4, 5]);

  function delete(e: CustomEvent) {
		const id = e.target.dataset.id;
		items = items.filter(i => i !== id);
  }

	function archive(e: CustomEvent) {
		const id = e.target.dataset.id;
		// call backend API to archive...

		items = items.filter(i => i !== );
	}
</script>

<ul>
	{#each items as i}
		<li
			use:swipe={{ direction: 'horizontal', threshold: '50%' }}
			data-id={i}
			onswipeleft={archive}
			onswiperight={delete}
		>{i}</li>
	{/each}
</ul>

Changelog