# qr-code-component-ng

> QR Code Web Component

Latest version **0.0.4** (published 2020-02-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install qr-code-component-ng
pnpm add qr-code-component-ng
yarn add qr-code-component-ng
bun add qr-code-component-ng
```

## Health

**Score 40/100 (D)** — status: abandoned.

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

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2020-02-11 |
| First published | 2020-02-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 786.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 289 |
| Author | Ionic Team |
| Maintainers | gabrielbazan89 |

## Links

- npm: https://www.npmjs.com/package/qr-code-component-ng
- Repository: https://github.com/ionic-team/stencil-component-starter
- Homepage: https://github.com/ionic-team/stencil
- Issues: https://github.com/ionic-team/stencil
- npm.io page: https://npm.io/package/qr-code-component-ng

## Dependencies (2)

- [just-animate](https://npm.io/package/just-animate.md) 2.5.0
- [qrcode-generator](https://npm.io/package/qrcode-generator.md) 1.4.0

## Recent versions

- 0.0.4 (latest) — 2020-02-11
- 0.0.3 — 2020-02-10
- 0.0.2 — 2020-02-10
- 0.0.1 — 2020-02-10

## README

# BitPay QR Code

A framework-less QR Code Web Component.

## Usage

Import the `bp-qr-code` component properly using your build system/framework, or use the standalone script:

```html
<script src="/path/to/bp-qr-code.js"></script>
```

Then use the component anywhere in the document:

```html
<bp-qr-code></bp-qr-code>
```

To use the `animateQRCode` method, the [Web Animations API polyfill](https://github.com/web-animations/web-animations-js) is required for [good browser support](https://github.com/web-animations/web-animations-js/blob/c5bf98eb447a76910297b8ccd011ace3310d1372/docs/support.md#browser-support). Import it properly with your build system, or

```html
<script src="https://unpkg.com/web-animations-js@2.3.1/web-animations.min.js"></script>
```

## Examples

Here's an example taking advantage of all configuration options:

```html
 <bp-qr-code
    id="qr1"
    contents="customprotocol:?r=https://bitpay.com/i/exampleh3mCKGUna7v9S1z"
    module-color="#1c7d43"
    position-ring-color="#13532d"
    position-center-color="#1c7d43"
    mask-x-to-y-ratio="1.2"
    style="width: 200px; height: 200px; background-color: #fff">
    <img src="assets/icon.svg" slot="icon">
  </bp-qr-code>
  <script>
    setTimeout(() => {
      document
        .getElementById('qr1')
        .animateQRCode('MaterializeIn');
    }, 1000);
  </script>
```

For more examples, [see `index.html`](./src/index.html) or clone this repo, `npm install`, and `npm start`.

## Contributing

You'll need [Node.js](https://nodejs.org/en/download/), then:

```bash
npm install
npm start
```

### Production build

```bash
npm run build
```

### Run the tests

```bash
npm test
```

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