Named actions in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a named action in Svelte?

A named action in Svelte is a reusable function that you can apply to HTML elements to add behavior, like event handling or animations, by using the use: directive with a specific name.

beginner

How do you apply a named action to an element in Svelte?

You apply a named action by adding use:actionName to the HTML element, where actionName is the function you want to run on that element.

intermediate

What arguments does a Svelte action function receive?

A Svelte action function receives two arguments: the HTML element it is applied to, and an optional parameter object for configuration.

intermediate

What should a Svelte action return if it needs to clean up?

If cleanup is needed, the action should return an object with a destroy method that runs when the element is removed or the action is changed.

intermediate

Can named actions in Svelte accept parameters? How?

Yes, named actions can accept parameters by passing them like use:actionName={params}. The action function receives these parameters as the second argument.

How do you attach a named action called highlight to a <div> in Svelte?

A <div use:highlight></div>

B <div action:highlight></div>

C <div on:highlight></div>

D <div highlight></div>

In Svelte, named actions are attached using the use: directive followed by the action name.

What does a Svelte action function receive as its first argument?

A An event object

B The HTML element it is applied to

C The component instance

D The action's name

The first argument to a Svelte action function is always the HTML element the action is applied to.

What should a Svelte action return if it needs to clean up when the element is removed?

A A promise

B A boolean true

C Nothing, cleanup is automatic

D An object with a destroy() method

Returning an object with a destroy method lets Svelte know how to clean up when the element is removed.

How do you pass parameters to a named action in Svelte?

A use:actionName={params}

B use:actionName(params)

C actionName={params}

D on:actionName={params}

Parameters are passed to named actions using curly braces after the action name, like use:actionName={params}.

Which of these is NOT a valid use of a named action in Svelte?

A use:fade

B use:tooltip={text}

C use:onClick

D use:draggable

use:onClick is invalid because event handlers use on:, not use:.

Explain how named actions work in Svelte and how you would create and use one.

Think about how you add behavior to elements with functions.

Describe how to pass parameters to a named action and how the action function handles them.

Consider how you customize the action's effect on the element.