Reusable DOM Logic with Svelte Actions

Snippet

Reusable DOM Logic with Svelte Actions

Actions are functions that are called when an element is created. They are perfect for integrating third-party libraries or handling global events like clicking outside a modal.

snippet.js
javascript
export function clickOutside(node) {
  const handleClick = (event) => {
    if (node && !node.contains(event.target) && !event.defaultPrevented) {
      node.dispatchEvent(new CustomEvent('click_outside'));
    }
  };
 
  document.addEventListener('click', handleClick, true);
 
  return {
    destroy() {
      document.removeEventListener('click', handleClick, true);
    }
  };
}

svelte

Breakdown

export function clickOutside(node) { ... }

Define a function that receives the DOM node as its first argument.

return { destroy() { ... } };

Return an object with a 'destroy' method to clean up event listeners when the element is removed.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Reusable DOM Logic with Svelte Actions

Related