https://github.com/nwaughachukwuma/svelte-tap-event

Simple touch event support for Svelte
https://github.com/nwaughachukwuma/svelte-tap-event

sveltejs

Last synced: about 1 month ago
JSON representation

Simple touch event support for Svelte

• Host: GitHub
• URL: https://github.com/nwaughachukwuma/svelte-tap-event
• Owner: nwaughachukwuma
• Created: 2021-10-26T17:23:11.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-29T13:47:11.000Z (about 3 years ago)
• Last Synced: 2023-08-24T07:15:42.635Z (over 1 year ago)
• Topics: sveltejs
• Language: TypeScript
• Homepage:
• Size: 63.5 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# svelte-tap-event

Simple cross platform click/touch event support for Svelte.

## Challenge

Read the post on [The Annoying Mobile Double-Tap Link Issue](https://css-tricks.com/annoying-mobile-double-tap-link-issue/).

## Motivation

The goal is to provide a consistent interface for all device types and as well solve touch-twice-to-activate a click/tap issue on iOS.

TODO:

- [X] API description

- [X] Example

## Installation

```bash

# pnpm

pnpm install svelte-tap-event

# yarn

yarn add svelte-tap-event

# npm

npm install svelte-tap-event

```

## Example

See a demo here: 

```svelte

import tapEvent from 'svelte-tap-event'

let tapCounter = 0

const onTap = () => {

 tapCounter++

}



  
Tap me!


  {#if tapCounter}

    


     Tapped x{tapCounter}

    

  {/if}



```


You can get what event triggered the tap - click or touch

```svelte

import tapEvent from 'svelte-tap-event'

const onTap = ({detail}: CustomEvent) => {

  if (detail.type === 'touch') {

    // do something

  } else {

    // it's a click - do something else

  }

}



...



```


Note [typescript project]: to use it on a `HTMLElement` e.g. a div or a tag, create a `declaration.d.ts` file with the following content and ensure to reference the file in `tsconfig.json`

```ts

declare namespace svelte.JSX {

  export interface DOMAttributes {

    ontap?: (e: CustomEvent) => void;

  }

}

```

## API

### tapEvent

Instance of `CustomEvent` containing event data with a `detail` payload

**detail**


Type: object

Defined as:

```ts

detail: {

  type: 'click' | 'touch';

}

```

- `'click'`: triggered by a mouse action

- `'touch'`: triggered by a touch action