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

Installation

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

Usage

Vanilla js demo

 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

<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

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()refrence: QR Code generator library | | options | QRCodeOptions | { bgColor: "#ffffff", dotColor: "#000000", markerColor: "#000000", dotMode: 0, markerMode: 0,withLogo:true } | qr code options for render svg |

QRCodeOptions:

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 to build easygenqr.

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

run locally

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