Use directive syntax in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the use: directive in Svelte?

The use: directive lets you apply a custom action to an HTML element. Actions are functions that run when the element is created and can add behavior like event listeners or animations.

beginner

How do you define a custom action to use with use: in Svelte?

A custom action is a function that receives the element as its first argument and optionally returns an object with a destroy method to clean up when the element is removed.

beginner

Example: What does <div use:highlight> do if highlight is a custom action?

It applies the highlight action to the div element, which might add styles or behavior like changing background color when the element appears.

intermediate

Can use: directives accept parameters? How?

Yes. You can pass parameters by writing use:action={params}. The action function receives the element and the parameters, allowing dynamic behavior.

intermediate

What happens if a use: action returns an object with an update method?

The update method is called whenever the parameters change, letting the action respond to new values without recreating the element.

What does the use: directive do in Svelte?

A Creates a reactive statement

B Binds a variable to an input

C Applies a custom action to an element

D Imports a component

The use: directive applies a custom action function to an element to add behavior.

How do you pass parameters to a use: action?

A use:action={params}

B use:action(params)

C use:action:param

D use:action->params

Parameters are passed using curly braces: use:action={params}.

What should a use: action return to clean up when the element is removed?

A A function named cleanup

B A boolean true

C Nothing

D An object with a destroy() method

Returning an object with a destroy() method lets Svelte clean up the action.

When is the update method of a use: action called?

A When the parameters change

B When the element is clicked

C When the component mounts

D When the page reloads

The update method runs when the parameters passed to the action change.

Which of these is a valid use of the use: directive?

A <div use:tooltip-text>

B <div use:tooltip={text}>

C <div use:tooltip(text)>

D <div use-tooltip={text}>

The correct syntax to pass parameters is use:action={params}.

Explain how to create and use a custom action with the use: directive in Svelte.

Think about how you add behavior to an element when it appears.

Describe what happens when a use: action returns an object with destroy and update methods.

Consider lifecycle of the element and parameter changes.