# rkgttr-elements

> HTML Components builder.

Latest version **0.0.7** (published 2017-05-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install rkgttr-elements
pnpm add rkgttr-elements
yarn add rkgttr-elements
bun add rkgttr-elements
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2017-05-03 |
| First published | 2017-01-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Erik Guittiere |
| Maintainers | rkgttr |
| Keywords | elements, node, components, html |

## Links

- npm: https://www.npmjs.com/package/rkgttr-elements
- Repository: https://github.com/rkgttr/rkgttr-elements
- Homepage: https://github.com/rkgttr/rkgttr-elements#readme
- Issues: https://github.com/rkgttr/rkgttr-elements/issues
- npm.io page: https://npm.io/package/rkgttr-elements

## Dependencies (2)

- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.11.6
- [rkgttr-arrayincludespolyfill](https://npm.io/package/rkgttr-arrayincludespolyfill.md) ^0.0.1

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.0.7 (latest) — 2017-05-03
- 0.0.6 — 2017-05-02
- 0.0.5 — 2017-01-20
- 0.0.4 — 2017-01-20
- 0.0.3 — 2017-01-19
- 0.0.2 — 2017-01-19
- 0.0.1 — 2017-01-18

## README

# [rkgttr-elements](https://github.com/rkgttr/rkgttr-elements)

[![NPM version](http://img.shields.io/npm/v/rkgttr-elements.svg?style=flat-square)](https://www.npmjs.com/package/rkgttr-elements)
[![NPM downloads](http://img.shields.io/npm/dm/rkgttr-elements.svg?style=flat-square)](https://www.npmjs.com/package/rkgttr-elements)
[![Build Status](http://img.shields.io/travis/rkgttr/rkgttr-elements/master.svg?style=flat-square)](https://travis-ci.org/rkgttr/rkgttr-elements)
[![Coverage Status](https://img.shields.io/coveralls/rkgttr/rkgttr-elements.svg?style=flat-square)](https://coveralls.io/rkgttr/rkgttr-elements)
[![Dependency Status](http://img.shields.io/david/rkgttr/rkgttr-elements.svg?style=flat-square)](https://david-dm.org/rkgttr/rkgttr-elements)

> HTML Components helpers, shamelessly inspired by https://github.com/davidgilbertson/know-it-all.

### How to Install

```sh
$ npm install rkgttr-elements --save-dev
```
or

```sh
$ yarn add rkgttr-elements --dev
```

### Getting Started

Build a component this way:

```js
import Publisher from 'rkgttr-publisher';
import uuid from 'rkgttr-uuid';
import { div, img, h2, p, a } from 'rkgttr-elements';

const MediaObject = (initialData) => {
  let el = null,
    uid = uuid();

  const render = data => (
    div({
        className: 'media',
        dataset: {uid: uid}
      },
      a({
          className: 'img',
          href: '#',
          onclick: (e) => {
            e.preventDefault();
            Publisher.trigger(`data:change`, {uid:uid, title: 'Hello', name: 'Mars' });
          }
        },
        img({ src: 'http://placehold.it/350x150', alt: 'Alt text' })
      ),
      div({ className: 'bd' },
        h2(data.title),
        p(data.name)
      )
    )
  );

  const update = (prevEl, newData) => {
    if(newData.uid !== uid) {
      return prevEl;
    }
    const nextEl = render(newData);

    if (nextEl.isEqualNode(prevEl)) {
      console.warn(`render() was called but there was no change in the rendered output`, el);
    } else {
      prevEl.parentElement.replaceChild(nextEl, prevEl);
    }

    return nextEl;
  };

  Publisher.on(`data:change`, (newData) => el = update(el, newData));

  el = render(initialData);

  return el;

};
document.body.appendChild(MediaObject({ title: 'Hello', name: 'World' }));
document.body.appendChild(MediaObject({ title: 'Hi', name: 'World' }));
```



### License

MIT © 2016 Erik Guittiere

---
_Source: https://npm.io/package/rkgttr-elements · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._