@qrshark/qr

A small and opinionated QR code generator in Javascript that only supports 99% of usecases.

This library only generates data and must be paired with a render function to create the final image.

Features

• Only Byte encoding mode (aka UTF8)

• Only Versions 1 - 13 (aka does not support preposterous sizes) | Error correction | Low (7%) | Medium (15%) | Quartile (25%) | High (30%) | | ---------------- | --- | ------ | -------- | ---- | | Max bytes/ASCII characters | 425 | 331 | 241 | 177 |

  • https://www.this-is-a-177-character-long-url-for.example/so-your-url-will-probably-fit?even-with=queries&and-parameters=like-this#and-you-can-even-add-a-fragment-and-it-will-fit

• No mask scoring step (aka faster with no downsides)

Usage

import { generate } from "@qrshark/qr";
const qr = generate("hello there");

Rendering

The qr result contains all the information needed to render a QR code. You can copy any design's render function from https://qrframe.kylezhe.ng, but here is a simple SVG example.

// Simple SVG example
const width = qr.version * 4 + 17;
const margin = 2;
const size = width + 2 * margin;
let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}">`;
svg += `<rect width="${size}" height="${size}" fill="#fff"/>`;
svg += `<path fill="#000" d="`;
for (let y = 0; y < width; y++) {
  for (let x = 0; x < width; x++) {
    if (qr.matrix[y * width + x] & 1) {
      svg += `M${x + margin},${y + margin}h1v1h-1z`;
    }
  }
}
svg += `"/>`;
svg += `</svg>`;

Misc

This library uses the TextEncoder API by default to encode strings into UTF8, which may not be available (e.g. React Native). You can set the encoder to "ASCII", which will work for all normal URLs or pass in a custom encoder function if you have specific needs.

The code takes shortcuts only possible because of certain assumptions. These are marked with a comment like // invariant: some assumption. When modifying, pay attention to the invariants and the constants at the bottom of the file.