https://github.com/WebReflection/dom-augmentor

Same as augmentor but with DOM oriented useEffect handling via dropEffect.
https://github.com/WebReflection/dom-augmentor

Last synced: about 2 months ago
JSON representation

Same as augmentor but with DOM oriented useEffect handling via dropEffect.

• Host: GitHub
• URL: https://github.com/WebReflection/dom-augmentor
• Owner: WebReflection
• License: isc
• Created: 2019-01-12T10:35:44.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-05-31T00:48:14.000Z (over 4 years ago)
• Last Synced: 2024-07-18T08:47:06.816Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 106 KB
• Stars: 58
• Watchers: 4
• Forks: 2
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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)

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

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`

   increment(i + 1)}>

    ${text} ${i}

  `;

});

const button = Button('hello');

render(document.body, button);

// alternatively

// document.body.appendChild(button());

```