# @stefannhs/databindr

> A Custom Element extension for simple data binding

Latest version **0.0.1** (published 2019-08-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install @stefannhs/databindr
pnpm add @stefannhs/databindr
yarn add @stefannhs/databindr
bun add @stefannhs/databindr
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2019-08-26 |
| First published | 2019-08-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Stefan Nieuwenhuis |
| Maintainers | stefannhs |
| Keywords | javascript, webcomponents, custom-elements, shadowdom, databinding |

## Links

- npm: https://www.npmjs.com/package/@stefannhs/databindr
- Repository: https://github.com/StefanNieuwenhuis/databindr
- Homepage: https://github.com/StefanNieuwenhuis/databindr#readme
- Issues: https://github.com/StefanNieuwenhuis/databindr/issues
- npm.io page: https://npm.io/package/@stefannhs/databindr

## Recent versions

- 0.0.1 (latest) — 2019-08-26
- 1.0.0-beta.1 (beta) — 2019-12-03

## README

# DataBindr
Enables simple data binding for Web Components by providing a base class. 

> By [@stefannhs](//twitter.com/stefannhs)

![](https://github.com/stefannieuwenhuis/databindr/workflows/npm%20build,%20lint,%20test%20and%20publish/badge.svg)

## Installation
```html
# unpkg
<script nomodule src="https://unpkg.com/@stefannhs/databindr@latest/dist/index.js"></script>
```

```bash
# npm
npm i @stefannhs/databindr
```

```bash
# yarn
yarn add @stefannhs/databindr
```

## Basic usage
1. Create a Web Component
2. Extend `DataBindr` in stead of `CustomElement`
3. Define a `state` object
4. Assign it to the component through the `data-bind` attribute

```js
// Step 1 & 2: Create a Custom Element with template
const template = document.createElement('template');
// Notice the data-bind attribute in the template's innerHTML 
// This means that state.greeting is bound to this element
template.innerHTML = `<h1 data-bind="greeting"></h1>`;

// Notice that GreeterComponent extends DataBindr in stead of CustomElement
class GreeterComponent extends DataBindr {
    constructor() {
        super();
        const shadowRoot = this.attachShadow({mode: 'open'});
        this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
}
customElements.define('my-greeter', GreeterComponent);

// Create a new instance of my-greeter
const myGreeterComponent = document.createElement('my-greeter');
// Define a state by assigning a key/value pair to the component.
// In this case myGreeterComponent.state.greeting contains the value Hello World
myGreeterComponent.state = {'greeting': 'Hello World!'};
```

## Demo
Check out [https://stefannieuwenhuis.github.io/databindr](https://stefannieuwenhuis.github.io/databindr/index.html) for examples.

## Browser support
The following browsers are supported natively:
* Chrome >= 54
* Firefox >= 63
* Safari >= 10.1

It's recommended for not natively supported browsers to use polyfills to optimally load Web Components. We recommend the use of [webcomponents.js polyfills](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs).

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