svelte-actions

A Prototype svelte actions for inclusion into official actions in future.

See RFC: sveltejs/rfcs#24
Discuss High Level Policy: swyxio#7

⚠️ Do not rely on this library yet!

Install Instructions

npm i svelte-actions

Available actions:

clickOutside
longpress
pannable
lazyload
preventTabClose
shortcut

Included Actions

`clickOutside`

export function clickOutside(node: HTMLElement, params: {enabled: boolean, cb: Function }): ReturnType<Action>

Call callback when user clicks outside a given element.

Demo: https://svelte.dev/repl/dae848c2157e48ab932106779960f5d5?version=3.19.2

<script>
  import {clickOutside} from 'svelte-actions'
  let open = true;
</script>


<div use:clickOutside={{ enabled: open, cb: () => open = false }}>
   <button on:click={() => open = true}>Open</button>
   {#if open}
    <span>
      Opened
    </span>
  {/if}
</div>

Discuss this action: swyxio#4

`longpress`

export function longpress(node: HTMLElement, duration: number): ReturnType<Action>

Creates longpress event when mousedown above duration milliseconds.

Demo: https://svelte.dev/tutorial/adding-parameters-to-actions

<script>
  import {longpress} from 'svelte-actions'
</script>

<button use:longpress={duration}
    on:longpress="{() => pressed = true}"
    on:mouseenter="{() => pressed = false}"
  >press and hold</button>

Discuss this action: swyxio#3

`pannable`

export function pannable(node: HTMLElement): ReturnType<Action>

Creates panstart, panmove, panend events so you can drag elements.

Demo: https://svelte.dev/tutorial/actions

<div class="box"
	use:pannable
	on:panstart={handlePanStart}
	on:panmove={handlePanMove}
	on:panend={handlePanEnd}
></div>

The events contain clientX and clientY coordinates (or diffs in the case of panmove):

panstart event: { detail: { x, y }}
panmove event: { detail: { dx, dy }}
panend event: { detail: { x, y }}

Discuss this action: swyxio#6

`lazyload`

export function lazyLoad(node: HTMLElement, attributes: Object): ReturnType<Action>

Lazily attach properties to any DOM element when it is in the window. Useful for lazy loading images, and other properties.

Demo: https://svelte.dev/repl/f12988de576b4bf9b541a2a59eb838f6?version=3.23.2

<script>
  import {lazyload} from 'svelte-actions'
</script>

<img use:lazyLoad={{src:"/myimage"}} alt="">

Discuss this action: swyxio#2

``preventTabClose`

export function preventTabClose(_, enabled: boolean)

Prevent current tab from being closed by user.

Demo: https://svelte.dev/repl/a95db12c1b46433baac2817a0963dc93

<script>
  import {preventTabClose} from 'svelte-actions'
  let isOn = false
</script>

<button use:preventTabClose={isOn} on:click={() => isOn = !isOn}>Click me</button>

Discuss this action: swyxio#11

``shortcut`

export function shortcut(node: Action, {
  control?: boolean;
  shift?: boolean;
  alt?: boolean;
  code: string;
  callback?: () => void;
})

Simplest possible way to add a keyboard shortcut to a div or a button.

It either calls a callback or clicks on the node it was put on.

Demo: https://svelte.dev/repl/acd92c9726634ec7b3d8f5f759824d15

<script>
  import {shortcut} from 'svelte-actions'
	let buttonCount = 0, divCount = 0;
</script>

<button use:shortcut={{shift: true, code: 'Digit1'}} on:click={() => buttonCount++}>
	Triggers a click on the button (Shift + 1)				
</button>

Clicked: {buttonCount}

Future actions considering adding

You can vote for or discuss proposed actions:

closeOnEscape/closeOnScroll/closeOnFocusOutside: sveltejs/rfcs#24 (comment)
selectTextOnFocus/clearTextOnEscape
blurOnEscape/blurOnEnter
viewport: creates enterViewport/leaveViewport events sveltejs/rfcs#24 (comment)

Click to vote:

Propose a new action here!

dkzlv / svelte-actions