# dom-augmentor

**Repository Path**: mirrors_WebReflection/dom-augmentor

## Basic Information

- **Project Name**: dom-augmentor
- **Description**: Same as augmentor but with DOM oriented useEffect handling via dropEffect.
- **Primary Language**: Unknown
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-19
- **Last Updated**: 2026-07-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# dom-augmentor

[![Build Status](https://travis-ci.com/WebReflection/dom-augmentor.svg?branch=master)](https://travis-ci.com/WebReflection/dom-augmentor) [![Coverage Status](https://coveralls.io/repos/github/WebReflection/dom-augmentor/badge.svg?branch=master)](https://coveralls.io/github/WebReflection/dom-augmentor?branch=master) [![Greenkeeper badge](https://badges.greenkeeper.io/WebReflection/dom-augmentor.svg)](https://greenkeeper.io/) ![WebReflection status](https://offline.report/status/webreflection.svg)

<sup>**Social Media Photo by [stephan sorkin](https://unsplash.com/@sorkin) on [Unsplash](https://unsplash.com/)**</sup>

This is exactly the same as the [augmentor](https://github.com/WebReflection/augmentor) module, except it handles automatically effects per DOM nodes.

Compatible with any function that returns a DOM node, or a fragment, or a hyperhtml like Wire instance.



### Breaking in v1

  * the default export has been removed, it's `import {augmentor} from 'augmentor'` now
  * the `augmentor` library is the v1 one
  * effects now work more reliably and there are no constrains for the guards



### Example

**[Live Demo](https://codepen.io/WebReflection/pen/maQXwq)**

```js
const {augmentor: $, useEffect, useRef, useState} = augmentor;
const {render, hook} = lighterhtml;
const {html, svg} = hook(useRef);

const Button = (text) => $(() => {
  useEffect(
    () => {
      console.log('connected');
      return () => console.log('disconnected');
    },
    []
  );
  const [i, increment] = useState(0);
  return html`
  <button onclick=${() => increment(i + 1)}>
    ${text} ${i}
  </button>`;
});

const button = Button('hello');

render(document.body, button);
// alternatively
// document.body.appendChild(button());
```