Svelte-event-modifiers

A library for using and creating event modifiers for svelte 5.

Installation

npm install svelte-event-modifiers

Modifiers

• preventDefault - calls event.preventDefault()
• stopPropagation - calls event.stopPropagation()

Usage

<script lang="ts">
	import { preventDefault } from "svelte-event-modifiers"

  function handler(e: Event) {
    console.log("Prevented default")
  }
</script>

<button onclick={preventDefault(handler)}>
  Click me!
</button>

Custom modifiers

To create custom event modifiers, we can use the createModifier helper.

import { createModifier } from 'svelte-event-modifiers'

const preventDefault = createModifier((event) => {
  // this will run before the handler
  event.preventDefault()
})