luwes / disco

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

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.

observe(...nodesOrSelectors)

Observe a node, array of nodes or an element selector for dis-connected events.

Kind: global function

Param	Type
...nodesOrSelectors	Node | String

unobserve([...nodesOrSelectors])

Unobserve for dis-connected events.

Kind: global function

Param	Type
[...nodesOrSelectors]	Node | String