Space-saving QR Code Generator – qrize.js

Category: Javascript | October 15, 2018

0 Comment

Demo Download

AUTHOR:	qrize
VIEWS TOTAL:	797 views
OFFICIAL PAGE:	Go to website
LAST UPDATE:	October 15, 2018
LICENSE:	MIT

---

Preview:

Description:

qrize.js is a JavaScript library used to generate space-saving, image/SVG/table based QR codes with URL shortener service integration.

How to use it:

Install and import the qrize.js package.

# Yarn
$ yarn add qrize

# NPM
$ npm install qrize --save

import Qrize from "qrize";

Or include the ‘qrize.umd.js’ directly on the web page.

<script src="qrize.umd.js"></script>

Create a container to place the generated QR code.

<div id="target"></div>

Initialize the QR code generator.

var qr = new Qrize({
    element: document.getElementById('target')
});

Generate a QR code inside the container.

qrize.createImg({ 
  url: "https://cssscript.com/" 
});

// or
qrize.createSvg({ 
  url: "https://cssscript.com/" 
});

// or
qrize.createTable({ 
  url: "https://cssscript.com/" 
});

To config the QR generator just by passing the following parameters to the constructor.

const qrize = new Qrize({
      element: document.getElementById("qr-target"),
      cellSize: 2,
      margin: 0
});

Callback functions.

qrize.createImg({ 
  url: "https://cssscript.com/",
  onSuccess: function onQrizeSuccess() {
    console.log('Success');
  },
  onFailure: function onQrizeFailure(status, text) {
    console.log('Failure: ', status, text);
  }
});

API methods.

Qrize.getHash({
  url: 'https://cssscript.com/',
  onSuccess({ hash }) {
    console.log(hash);
  }
})

Qrize.getUrl({
  hash: 'xxx',
  onSuccess({ url }) {
    console.log(url);
  }
})

Changelog:

v0.4.0 (10/15/2018)

• Add flow annotations