Skip to content
/ disco Public

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

Notifications You must be signed in to change notification settings

luwes/disco

Repository files navigation

Disco 🕺

Version Badge size

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

About

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

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published