Passing Arguments into Svelte Actions
Tags: webdev, programming, javascript, svelte
Published: 2021-01-28 21:37:21

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

Svelte is an up and coming front end framework for developing front end web apps.

It’s simple to use and lets us create results fast.

In this article, we’ll look at how to pass parameters into actions.

Adding Parameters
=================

Actions can take arguments. This means that the action will be called alongside the elements it belongs to.

For instance, we can create an app where we display a message when we clicked and held a button for a specified amount of time that we can change with a slider.

To make this, we write the following code:

`longpress.js`

```
export const longpress = (node, duration) => {  
  let timer; 
  const handleMousedown = () => {  
    timer = setTimeout(() => {  
      node.dispatchEvent(new CustomEvent("longpress"));  
    }, duration);  
  }; 

  const handleMouseup = () => {  
    clearTimeout(timer);  
  }; 

  node.addEventListener("mousedown", handleMousedown);  
  node.addEventListener("mouseup", handleMouseup); return {  
    destroy() {  
      node.removeEventListener("mousedown", handleMousedown);  
      node.removeEventListener("mouseup", handleMouseup);  
    },  
    update(newDuration) {  
      duration = newDuration;  
    }  
  };  
};
```

`App.svelte` :

```
<script>  
  import { longpress } from "./longpress.js";
  let pressed = false;  
  let duration = 2000;  
</script>

<label>  
  <input type=range bind:value={duration} max={2000} step={100}>  
  {duration}ms  
</label>

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

{#if pressed}  
  <p>You pressed for {duration}ms</p>  
{/if}
```

In the code above, we created a `longpress` action that takes a `duration` as an argument.

We have the `update` method in the object we return to update the `duration` when it’s passed in.

Then when we click the mouse, the `mousedown` event is emitted, and then the `handleMousedown` is called.

We dispatch the custom `longpress` event after the specified `duration` via `setTimeout` .

Then when the mouse button is released, `handleMouseup` is called, and then `clearTimeout` is called.

Then in `App.svelte` , we have the button that we long press to see the message. We have the slider to adjust how long the long-press last until we see the message.

This works because we listened to the `longpress` event emitted by the button, which is attached to the `longpress` action with the `use:longpress` directive.

When we first hover over the button, then `mouseenter` event is emitted and `pressed` is set to `false` .

When the `longpress` event is emitted from `longprss` , which is emitted, when we hold the button for long enough, then `pressed` is set to `true` .

Then the message is displayed when `pressed` is `true` .

If we need to pass in multiple arguments, we pass in one object with multiple properties like:

```
use:longpress={{duration, foo}}
```

Conclusion
==========

We can pass in a single argument to action. This lets us adjust our actions in the way that we want.

The `update` function is required to update the value when the argument is updated.