View Code? Open in Web Editor NEW

Easy and universal way to react to elements being disconnected and connected from the DOM aka lifecycle methods.

JavaScript 100.00%

disco's Introduction

Disco 🕺

npm: npm i disco
cdn: https://unpkg.com/disco

Easy and universal way to react to elements being disconnected and connected via native DOM events.

Observe via a direct node reference, an array of nodes or a string selector that internally makes use of Element.matches(selectorString). It's recommended to keep the observed scope as small as possible for the best performance.

Example

import { observe } from 'disco';

/**
 * Observe one specific div element
 */
const div = document.createElement('div');
observe(div);

div.addEventListener('connected', () => console.log('connected!'));
document.body.append(div);

/******************************************************************/

/**
 * Observe all (future) h1 elements.
 */
observe('h1');
const firstH1 = document.createElement('h1');
const lastH1 = document.createElement('h1');

firstH1.addEventListener('connected', () => console.log('connected!'));
lastH1.addEventListener('connected', () => console.log('connected!'));

document.body.append(firstH1, lastH1);

/******************************************************************/

/**
 * Observe all section elements in the document for removal.
 */
const sections = document.querySelectorAll('section');
observe(...sections);
[...sections].forEach(section =>
  section.addEventListener('disconnected', () => console.log('🕺')))

API

observe(...nodesOrSelectors): Observe a node, array of nodes or an element selector for dis-connected events.
unobserve([...nodesOrSelectors]): Unobserve for dis-connected events.