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.