How to Pass Parameters to Action in Svelte: Simple Guide

In Svelte, you pass parameters to an action by creating a function that returns an object with lifecycle methods and accepts parameters as arguments. Then, you call this function with your parameters inside the use: directive, like use:myAction={param}.

Syntax

To pass parameters to an action in Svelte, define the action as a function that takes parameters and returns an object with lifecycle methods like destroy. Then use the action in your component with use:actionName={parameter}.

Example parts:

• function myAction(node, param) { ... }: The action function receives the DOM node and the parameter.
• use:myAction={param}: Passes param to the action.

javascript

function myAction(node, param) {
  // node is the element
  // param is the passed parameter
  console.log('Parameter:', param);
  return {
    destroy() {
      // cleanup if needed
    }
  };
}

// Usage in markup:
// <div use:myAction={param}></div>

Example

This example shows an action that changes the background color of an element based on a passed color parameter.

svelte

<script>
  function highlight(node, color) {
    node.style.backgroundColor = color;
    return {
      update(newColor) {
        node.style.backgroundColor = newColor;
      },
      destroy() {
        node.style.backgroundColor = '';
      }
    };
  }

  let color = 'lightblue';
</script>

<input type="color" bind:value={color} aria-label="Pick a background color" />

<div use:highlight={color} tabindex="0" style="padding: 1rem; margin-top: 1rem; border: 1px solid #ccc;">
  This box's background changes with the color picker.
</div>

Output

A color input and a box below it. Changing the color input updates the box's background color in real time.

Common Pitfalls

Common mistakes when passing parameters to actions include:

• Not returning an update method to handle parameter changes, so the action doesn't react to new values.
• Passing complex objects without handling deep changes, which may not trigger updates.
• Forgetting to clean up in destroy, causing memory leaks.

Always implement update if your parameter can change after initialization.

javascript

/* Wrong: No update method, so changes to param won't reflect */
function wrongAction(node, param) {
  node.textContent = param;
  return {
    destroy() {}
  };
}

/* Right: Implements update to handle param changes */
function rightAction(node, param) {
  node.textContent = param;
  return {
    update(newParam) {
      node.textContent = newParam;
    },
    destroy() {}
  };
}

Quick Reference

Passing parameters to actions in Svelte:

• Define action as function actionName(node, param) { ... }
• Return an object with optional update(newParam) and destroy() methods
• Use in markup as use:actionName={param}
• Implement update to respond to parameter changes
• Clean up in destroy to avoid leaks

Key Takeaways

Pass parameters to Svelte actions by defining the action function with a second parameter and using use:action={param}.

Implement the update method inside the action to handle changes to parameters dynamically.

Always clean up resources in the destroy method to prevent memory leaks.

Use simple parameters or handle complex objects carefully to ensure updates trigger correctly.

Actions receive the DOM node as the first argument and the parameter as the second.