https://github.com/luwes/disco

Easy and universal way to react to elements being disconnected and connected from the DOM aka lifecycle methods.
https://github.com/luwes/disco

connected disconnected dom lifecycle universal

Last synced: 29 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/luwes/disco
• Owner: luwes
• Created: 2020-03-18T23:16:19.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-11T13:01:23.000Z (5 months ago)
• Last Synced: 2025-01-03T05:47:53.373Z (about 1 month ago)
• Topics: connected, disconnected, dom, lifecycle, universal
• Language: JavaScript
• Homepage:
• Size: 1.36 MB
• Stars: 34
• Watchers: 4
• Forks: 0
• Open Issues: 16
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Disco 🕺

[![Version](https://img.shields.io/npm/v/disco.svg?color=success&style=flat-square)](https://www.npmjs.com/package/disco)

![Badge size](https://img.badgesize.io/https://unpkg.com/disco/dist/disco.min.js?v=1&compression=gzip&label=gzip&style=flat-square&v=1)

**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

```js

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 |