Qr Grid

The Ultimate Customizable QR Code JavaScript Library

Note

For complete documentation visit: qrgrid.dev

Table of Contents

• Usage
  • Core
  • Cli
  • Server
  • React
  • Vue
  • Angular
  • Styles
• Credits
• License

Usage

Core

This package serves as the foundational component for encoding QR codes, utilized by all other qrGrid packages. For maximum customization and full control over QR code generation, it is recommended to use this core package directly.

Installation:

npm i @qrgrid/core

Example usage:

import { QR } from "@qrgrid/core";

new QR("Hello World!")

Cli

Generate QR codes directly from the command line with this straightforward CLI tool. It supports generating SVG output for easy conversion to other formats. While it doesn't offer customization options, it provides a reliable and efficient way to create standard QR codes quickly in terminal-based environments.

Installation:

# Use it directly with npx
npx @qrgrid/cli 
# Or install globally
npm i -g @qrgrid/cli 

Example usage:

# Using npx
npx @qrgrid/cli -i "Hello world in cli"
# If installed globally
qrgrid -i "Hello world in cli"

Server

Generate QR codes seamlessly in the backend with official support for SVG output, enabling easy conversion to other formats. This package offers robust and flexible options for creating QR codes, making it a versatile choice for any backend application.

Installation:

npm i @qrgrid/server

Example usage (Express server):

import { generateQr } from "@qrgrid/server";
import express from "express";

const app = express();
// api routes
app.use("/", (req, res) => {
  const qr = generateQr("hello world from server");
  res.set("Content-Type", "text/html");
  res.send(Buffer.from(qr));
});

app.listen(5000);

React

This package serves as a wrapper for @qrgrid/core. Provides two ways to generate the Qr using Canvas and Svg.

Installation:

npm i @qrgrid/react

Example usage:

import { Canvas, Svg } from "@qrgrid/react";

<Canvas.Qr input="Hello World!"/>
<Svg.Qr input="Hello World!"/>

Vue

This package serves as a wrapper for @qrgrid/core. Provides two ways to generate the Qr using Canvas and Svg.

Installation:

npm i @qrgrid/vue

Example usage:

import { Canvas, Svg } from "@qrgrid/vue";

<Canvas input="Hello World!"/>
<Svg input="Hello World!"/>

Angular

This package serves as a wrapper for @qrgrid/core. Provides two ways to generate the Qr using Canvas and Svg.

Installation:

npm i @qrgrid/angular

Example usage:

import { CanvasQr, SvgQr } from "@qrgrid/angular";

<qr input="Hello World!"/>

Styles

It provides utility functions and styling options for customizing QR codes.

Installation:

npm i @qrgrid/styles

Example usage (React):

import { Qr } from "@qrgrid/react/canvas";
import { downloadQr } from "@qrgrid/styles/canvas/utils"

const canvasRef = useRef<HTMLCanvasElement | null>(null);
// pass the ref to the download utility function
downloadQr(canvasRef.current, "png", "qr");

<Qr input="Hello World" ref="canvasRef" />

Credits

Inspired from soldair/node-qrcode by Ryan Day

License

Qr Grid is totally free for commercial use and personally use, this software is licensed under the MIT

The word "QR Code" is registered trademark of: DENSO WAVE INCORPORATED