# sharedb-attribute-binding

> A ShareDB binding that allows you to bind element attributes like `id`, `class`, `style` and of course input's `value`

Latest version **0.1.12** (published 2020-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install sharedb-attribute-binding
pnpm add sharedb-attribute-binding
yarn add sharedb-attribute-binding
bun add sharedb-attribute-binding
```

## 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.1.12 |
| Published | 2020-08-09 |
| First published | 2019-03-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Alejandro del Río |
| Maintainers | adelriosantiago |
| Keywords | sharedb, sharejs, stringbinding, attribute binding, sharedb-string-binding, sharedb-generic-binding, text-diff-binding |

## Links

- npm: https://www.npmjs.com/package/sharedb-attribute-binding
- Repository: https://github.com/adelriosantiago/sharedb-attribute-binding
- Issues: https://github.com/adelriosantiago/sharedb-attribute-binding/issues
- npm.io page: https://npm.io/package/sharedb-attribute-binding

## Alternatives

- [@mce/gif](https://npm.io/package/@mce/gif.md) — 2.6K weekly downloads
- [cleanse](https://npm.io/package/cleanse.md) — 173 weekly downloads
- [str](https://npm.io/package/str.md) — 127 weekly downloads
- [naming](https://npm.io/package/naming.md) — 95 weekly downloads
- [tap-telco-api](https://npm.io/package/tap-telco-api.md) — 19 weekly downloads

## Recent versions

- 0.1.12 (latest) — 2020-08-09
- 0.1.11 — 2020-08-08
- 0.1.10 — 2020-08-08
- 0.1.9 — 2020-08-04
- 0.1.8 — 2020-08-04
- 0.1.7 — 2020-05-08
- 0.1.6 — 2019-06-04
- 0.1.5 — 2019-03-26
- 0.1.4 — 2019-03-24
- 0.1.3 — 2019-03-23
- 0.1.2 — 2019-03-22
- 0.1.1 — 2019-03-21

## README

# sharedb-attribute-binding

A ShareDB binding that allows you to bind element attributes like `id`, `class`, `style`, etc. Element's value is always written even when changing another attribute.
Based on https://github.com/stanographer/sharedb-generic-binding.

_As used in [boy.dog](http://boy.dog). The web library that allows you to create real-time collaborative webpages._

## Usage

```bash
npm install --save sharedb-attribute-binding
```

```js
// Require it.
const AttributeGenericBinding = require("sharedb-attribute-binding");

// Setup the connection.
const socket = new WebSocket("ws://YOUR_HOST:YOUR_PORT", [], socketOptions);
const connection = new sharedb.Connection(socket);
const doc = connection.get("examples", "textarea");

// Subscribe to the document.
doc.subscribe((err) => {
  if (err) throw err;
  const element = document.getElementById("YOUR_DIV_OR_WHATEVER");

  // Use any of the following:

  //const binding = new AttributeGenericBinding(element, doc, ["content"], ""); //To set the input/textarea value
  //const binding = new AttributeGenericBinding(element, doc, ["content"], "id"); //To set the element `id`
  //const binding = new AttributeGenericBinding(element, doc, ["content"], "href"); //To set the element `href`
  //const binding = new AttributeGenericBinding(element, doc, ["content"], "src"); //To set the element `src`
  //const binding = new AttributeGenericBinding(element, doc, ["content"], "html"); //To set the element `innerHTML`
  //const binding = new AttributeGenericBinding(element, doc, ["content"], "class"); //To set the element `className` (this keeps old classes)
  //or
  //const binding = new AttributeGenericBinding(element, doc, ["content"], function(element, value) { [CUSTOM_FUNCTION] }); //To set a custom function callback

  // All examples above will also set elements' value (i.e. to bind an input use `const binding = new AttributeGenericBinding(element, doc, [], "")`)

  binding.setup();
});
```

## Tests

Run `npm run test`. They all should work but bear in mind that no tests have been created for all attributes (src, href, id, etc).

## License

MIT - Alejandro del Río Santiago [@adelriosantiago](https://twitter.com/adelriosantiago) ([boy.dog](http://boy.dog/))

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