Action return data in Svelte - Mini Project: Build & Apply

Using Action Return Data in Svelte

📖 Scenario: You are building a simple interactive Svelte component that changes the background color of a box when you hover over it. You want to use a Svelte action that returns data about the hover state, so the component can react accordingly.

🎯 Goal: Create a Svelte action that returns an object with a hovered property indicating if the mouse is over the element. Use this returned data in the component to change the box's background color.

📋 What You'll Learn

Create a Svelte action called hoverAction that tracks mouse enter and leave events.

The action must return an object with a hovered property that is true when hovered and false otherwise.

In the component, use the action and access the returned data to conditionally set the box background color.

Use reactive statements or bindings to update the UI based on the action's returned data.

💡 Why This Matters

🌍 Real World

Svelte actions are useful for adding reusable behavior to DOM elements, such as tracking user interactions or managing animations. Returning data from actions lets components respond dynamically to these behaviors.

💼 Career

Understanding how to create and use Svelte actions with return data is important for building interactive, maintainable web applications using Svelte. This skill is valuable for frontend developers working with modern frameworks.

1

Create the hoverAction Svelte action

Write a Svelte action named hoverAction that accepts a DOM element parameter. Inside, add event listeners for mouseenter and mouseleave events on the element. Initialize a variable hovered to false. The action should return an object with a hovered property set to false initially.

Svelte

// Your code here

// Create hoverAction function that takes element
// Add mouseenter and mouseleave event listeners
// Initialize hovered to false
// Return { hovered } object

Hint

Remember, a Svelte action is a function that receives a DOM element. Use addEventListener to track mouse events. Return an object with the hovered property.

2

Add a reactive variable to track hover state

In the Svelte component, create a variable called hoveredState and set it initially to false. This variable will hold the current hover state from the action's returned data.

Svelte

export function hoverAction(node) {
    let hovered = false;

    function handleMouseEnter() {
        hovered = true;
    }

    function handleMouseLeave() {
        hovered = false;
    }

    node.addEventListener('mouseenter', handleMouseEnter);
    node.addEventListener('mouseleave', handleMouseLeave);

    return {
        hovered
    };
}

// Your code here

// Create a variable called hoveredState and set it to false

Hint

Just create a simple variable hoveredState and set it to false.

3

Use the action and update hoveredState reactively

In the Svelte component, use the use:hoverAction directive on a <div> element. Capture the returned object from the action in a variable called actionReturn. Then, create a reactive statement that updates hoveredState to actionReturn.hovered whenever it changes.

Svelte

export function hoverAction(node) {
    let hovered = false;

    function handleMouseEnter() {
        hovered = true;
    }

    function handleMouseLeave() {
        hovered = false;
    }

    node.addEventListener('mouseenter', handleMouseEnter);
    node.addEventListener('mouseleave', handleMouseLeave);

    return {
        hovered
    };
}

let hoveredState = false;

// Your code here

// Use the hoverAction on a div with use:hoverAction={actionReturn}
// Create a reactive statement to update hoveredState = actionReturn.hovered

Hint

Use let actionReturn to capture the action's return. Use a reactive statement $: hoveredState = actionReturn?.hovered ?? false to update the hover state.

4

Change the box background color based on hover state

Add a style attribute to the <div> that sets the background color to lightblue when hoveredState is true, and white when false. Use a ternary expression inside the style attribute.

Svelte

export function hoverAction(node) {
    let hovered = false;

    function handleMouseEnter() {
        hovered = true;
    }

    function handleMouseLeave() {
        hovered = false;
    }

    node.addEventListener('mouseenter', handleMouseEnter);
    node.addEventListener('mouseleave', handleMouseLeave);

    return {
        hovered
    };
}

let hoveredState = false;

let actionReturn;

$: hoveredState = actionReturn?.hovered ?? false;



  

Hint

Use the ternary operator inside the style attribute to change background color based on hoveredState.