jQuery QRCode Generator

1.0.3 · abandoned · verified Wed Apr 22

jquery.qrcode is a pure browser-side jQuery plugin designed for generating QR codes dynamically within web pages. Released over a decade ago, its last stable version, 1.0.3, was published in 2016. The package does not have a regular release cadence and is no longer actively maintained under its primary npm listing. Its key differentiators include being a standalone solution, generating QR codes without relying on external services, producing compact output (less than 4KB minified and gzipped), and not requiring image downloads. This approach minimizes latency and external dependencies, making it suitable for environments where offline capability or strict control over assets is required. However, its age means it predates modern JavaScript module systems and may have compatibility issues with recent jQuery versions or build tools. Newer, actively maintained QR code libraries and jQuery plugin forks (like lrsjng/jquery-qrcode) are available as alternatives.

Common errors

```
TypeError: $(...).qrcode is not a function
```
cause The `jquery.qrcode.js` script was not loaded, or it was loaded before jQuery, or jQuery itself was not loaded.

fix Ensure jQuery is loaded first, followed by `jquery.qrcode.min.js`, both via `<script>` tags, before attempting to call the `.qrcode()` method. Check script paths and loading order in your HTML.
```
ReferenceError: $ is not defined
```
cause jQuery library itself has not been loaded before `jquery.qrcode.js` or any script attempting to use `$` (or `jQuery`).

fix Add a `<script>` tag for jQuery (e.g., from a CDN like `https://code.jquery.com/jquery-3.6.0.min.js`) before your `jquery.qrcode.min.js` script and any custom JavaScript code that uses jQuery.

Warnings

breaking The `jquery.qrcode` package (v1.0.3) has not been updated in over 10 years, meaning it likely has unresolved bugs and lacks security patches. It relies on older jQuery versions and may not be compatible with modern jQuery (e.g., jQuery 3.x or 4.x) due to changes in jQuery's API.
Fix: Consider migrating to actively maintained QR code generation libraries. For jQuery projects, forks like `lrsjng/jquery-qrcode` (found on GitHub, not npm under this name) might offer better compatibility. For non-jQuery projects, pure JavaScript alternatives like `qrcode.js` or modern framework-specific components are recommended.
gotcha This package is a traditional jQuery plugin designed for script-tag inclusion in HTML. It does not natively support ES Modules (`import`) or CommonJS (`require`) syntax. Attempting to import it directly in a modern JavaScript module environment will result in errors.
Fix: Include `jquery.qrcode.min.js` via a `<script>` tag after jQuery, or configure your bundler (e.g., Webpack, Rollup) to treat it as a global script and ensure jQuery is available globally.
deprecated The original GitHub repository (`jeromeetienne/jquery-qrcode`) and the npm package (`jquery.qrcode` v1.0.3) are largely unmaintained. There's no active development, bug fixes, or new features planned for this specific npm package version.
Fix: Evaluate newer, actively maintained QR code libraries. For browser-only use cases, consider modern pure JavaScript libraries that don't depend on jQuery or more actively maintained jQuery plugin forks.

Install

npm install jquery.qrcode npm
yarn add jquery.qrcode yarn
pnpm add jquery.qrcode pnpm

Imports

jQuery.fn.qrcode
wrong:
```
import { qrcode } from 'jquery.qrcode'; // Not a module, extends jQuery prototype
```
correct:
```

$('#qrcode').qrcode('https://example.com');
```
This is a traditional jQuery plugin; it attaches its functionality directly to the jQuery prototype (`$.fn`). It is not an ES module or CommonJS module and should be included via a `<script>` tag after jQuery itself.

Configuration options

wrong:

$('#qrcode').qrcode().config({ width: 128 }); // Configuration is passed directly to the qrcode method

correct:

$('#qrcode').qrcode({ width: 128, height: 128, text: 'Hello World!' });

Options for width, height, and the QR code content are passed as an object literal to the `.qrcode()` method.

Quickstart

Demonstrates how to include jQuery and jquery.qrcode via CDN, then generate a QR code for the current page's URL within a specified DOM element upon document ready.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery QRCode Quickstart</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
</head>
<body>
    <h1>Scan Me!</h1>
    <div id="qrcode-container"></div>

    <script type="text/javascript">
        $(document).ready(function() {
            const currentUrl = window.location.href;
            $('#qrcode-container').qrcode({
                width: 256,
                height: 256,
                text: currentUrl,
                // Optional: set the color
                // 'color': '#3a3',
                // 'ecLevel': 'H' // Error Correction Level: L, M, Q, H
            });
            console.log('QR Code generated for URL:', currentUrl);
        });
    </script>
</body>
</html>

view raw JSON →