# easygenqr

> This is a library for generating QR codes.

Latest version **1.3.0** (published 2024-06-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install easygenqr
pnpm add easygenqr
yarn add easygenqr
bun add easygenqr
```

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2024-06-07 |
| First published | 2023-10-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 235 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | tianqi |
| Maintainers | azqsxw11011 |
| Keywords | qrcode, qr, svg |

## Links

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

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 1.3.0 (latest) — 2024-06-07
- 1.2.9 — 2024-06-07
- 1.2.8 — 2024-06-07
- 1.2.7 — 2023-10-24
- 1.2.6 — 2023-10-24
- 1.2.5 — 2023-10-24
- 1.2.4 — 2023-10-23
- 1.2.2 — 2023-10-22
- 1.2.1 — 2023-10-21
- 1.2.0 — 2023-10-21
- 1.1.7 — 2023-10-19
- 1.1.6 — 2023-10-19
- 1.1.5 — 2023-10-19
- 1.1.4 — 2023-10-19
- 1.1.3 — 2023-10-19
- … 4 more at https://npm.io/package/easygenqr/versions

## README

# easygenqr

This is a library for generating QR codes. Use encodeData to implement data parsing for qrcode, and then use generateSVGQRCode to generate svg for qrcode

- generate svg for qrcode

- custom styles

- add brand logo  

<img title="" src="https://i.imgur.com/rZ3N3Fg.png" alt="">

## Installation

```bash
$ npm install easygenqr
or
$ yarn add easygenqr
or
$ pnpm add easygenqr
```

## Usage

### Vanilla js demo

```javascript
 const qr = encodeData({
    text: "Hello World!",
    errorCorrectionLevel: 3
 });

 const svg = generateSVGQRCode(qr,{
     bgColor: "#ffffff",
     dotColor: "#000000",
     dotMode: 0,
     markerColor: "#000000",
     markerMode: 0
 });

 // add to html
 const div = document.createElement("div");
 div.style.width = "300px";
 div.style.height = "300px";
 div.innerHTML = svg;
```

### Vue.js demo

```javascript
<script setup lang="ts">
import {
  encodeData,
  ErrorCorrectLevel,
  generateSVGQRCode,
  MarkerModes,
} from "easygenqr";

interface Props {
  text: string;
  width?: number;
  height?: number;
  ecc?: ErrorCorrectLevel;
  bgColor?: string;
  dotColor?: string;
  dotMode?: number;
  markerMode?: MarkerModes;
  markerColor?: string;
}

const props = defineProps<Props>();
const qrSVGString = ref<string>();
const qrData = ref<any>();

function render() {
  const qr = encodeData({
    text: props.text,
    errorCorrectionLevel: props.ecc || 1,
  });
  qrData.value = qr;
  qrSVGString.value = generateSVGQRCode(qr, {
    bgColor: props.bgColor || "#ffffff",
    dotColor: props.dotColor || "#000000",
    dotMode: props.dotMode || 0,
    markerMode: props.markerMode || 0,
    markerColor: props.markerColor || "#000000",
  });
}

watch(
  props,
  () => {
    render();
  },
  { immediate: true }
);
</script>

<template>
  <div
    :style="{
      width: props.width ? props.width + 'px' : '150px',
      height: props.height ? props.height + 'px' : '150px',
    }"
    v-html="qrSVGString"
  ></div>
</template>
```

### React.js demo

```javascript
import { encodeData, generateSVGQRCode } from 'easygenqr'

export default function QRCode(){
  const qr = encodeData({
    text: "Hello easygenqr!",
    errorCorrectionLevel: 1,
  });

  const svgString = generateSVGQRCode(qr, {
    bgColor: "#ffffff",
    dotColor: "#000000",
    dotMode: 0,
    markerMode: 0,
    markerColor: "#000000",
  })

  return <div dangerouslySetInnerHTML={{ __html: svgString }} />;
}
```

## API

#### encodeData

| Parameters           | Type              | Default | Description                                                  |
| -------------------- | ----------------- | ------- | ------------------------------------------------------------ |
| text                 | string            |         | qr code text                                                 |
| errorCorrectionLevel | ErrorCorrectLevel | 3       | error correction level: 0=>LOW 1=>MEDIUM 2=>QUARTILE 3=>HIGH |

#### generateSVGQRCode

| Parameters | Type             | Default                                                                                                                                                                                           | Description                                                                                                                           |
| ---------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| qr         | qrcodegen.QrCode |                                                                                                                                                                                                   | The data returned by encodeData()<br/>**refrence**: [QR Code generator library](https://www.nayuki.io/page/qr-code-generator-library) |
| options    | QRCodeOptions    | {<br/>            bgColor: "#ffffff",<br/>            dotColor: "#000000",<br/>            markerColor: "#000000",<br/>            dotMode: 0,<br/>            markerMode: 0,<br/>withLogo:true } | qr code options for render svg                                                                                                        |

`QRCodeOptions`:

```typescript
QRCodeOptions {
    bgColor?: string; // qr code background color
    dotColor?: string; // qr code dot color
    markerColor?: string; // marker color
    dotMode?: DotModes; // dot style 0=>SQUARE 1=>CIRCLE
    markerMode?: MarkerModes; // marker style
    logo?: string; // logo url
    withLogoBg?: boolean; // logo background is transparent or not
}
```

`DotModes`

| Value | Description |
| ----- | ----------- |
| 0     | Square      |
| 1     | Circle      |
| 2     | Rounded     |
| 3     | LineCircle  |

`MarkerModes`

| Value | Description                                     |
| ----- | ----------------------------------------------- |
| 0     | Base: border square and center square           |
| 1     | border rounded corner and center rounded corner |
| 2     | border circle and center circle                 |
| 3     | border square and center circle                 |
| 4     | border circle and center square                 |

`logo`

Support Base64 or picture url.

`withLogoBg`

| Value          | Description                     |
| -------------- | ------------------------------- |
| true (default) | logo background is white.       |
| false          | logo background is transparent. |

## Developer

Using [tsup](https://tsup.egoist.dev/) to build easygenqr.

Generating data for qrcode based on https://www.nayuki.io/page/qr-code-generator-library

#### run  locally

```bash
npm run dev
```

#### open example

open example/index.html in browser

debug in index.html file

 

## Reference

**QR Code generator**: https://www.nayuki.io/page/qr-code-generator-library

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