# bow-web

> Simple wrapper for components.

Latest version **0.1.1** (published 2020-12-06) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install bow-web
pnpm add bow-web
yarn add bow-web
bun add bow-web
```

## Health

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

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

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2020-12-06 |
| First published | 2020-12-06 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 28.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ccchapman |

## Links

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

## Recent versions

- 0.1.1 (latest) — 2020-12-06
- 0.1.0 — 2020-12-06

## README

# bow-web

Bow is a minimal library for building reusable web components without getting
in your way.

**Example component:**

```ts
import { Component, componentFactoryBatch } from "bow-web";

/** A greeter component instance. */
export class Greeter extends Component {
  /** Input element for the person's name. */
  private nameInput: HTMLInputElement;

  /** Element for displaying the greeting result. */
  private resultArea: HTMLElement;

  /**
   * Setup the greeter.
   */
  mounted(): void {
    this.nameInput = this.element("name") as HTMLInputElement;
    this.resultArea = this.element("result");
    this.nameInput.addEventListener("keyup", () => this.renderResult());
    this.renderResult();
  }

  /**
   * Populate the result.
   */
  renderResult(): void {
    this.resultArea.innerText = `Hey, ${this.greetingName}!`;
  }

  /**
   * Determine the greeting name.
   */
  get greetingName(): string {
    return this.nameInput.value || "stranger";
  }
}

export default componentFactoryBatch(Greeter) as Greeter[];
```

```html
<div class="js-greeter">
  <input class="js-greeter-name" type="text">
  <span class="js-greeter-result"></span>
</div>
```

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