react-qrx

QR & Barcode Library & CLI

A QR & Barcode Library for Node.js/Bun, the CLI, including all major browsers.

Features

• 🤖 QR Code: Customizable Generation & Reading
• 📊 Barcode: CODE128, EAN, EAN-13, EAN-8, EAN-5, EAN-2, UPC (A), CODE39, ITF-14, MSI, Pharmacode, Codabar—Generation & Reading
• 📦 Lightweight: Zero dependencies
• 🚀 Fast: Built with performance in mind
• 📜 TypeScript: Strongly typed
• 📚 Simple: Easy to use
• 📖 Documentation: Well-documented
• 🛠 Library & CLI: Interact in different ways

Install

It's simple to install the library and CLI:

npm install qrx
bun add qrx
yarn add qrx
pnpm add qrx

Check out the package.json scripts for more commands.

Usage

QR Code

<div id="qrcode"></div>

<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "https://stacksjs.org");
</script>

If you want to customize the QR code, you can pass in an options object:

<div id="qr-code"></div>

<script type="text/javascript">
var qrCode = new QRCode(document.getElementById("qr-code"), {
  text: "https://stacksjs.org",
  width: 128,
  height: 128,
  colorDark : "#000000",
  colorLight : "#ffffff",
  correctLevel : QRCode.CorrectLevel.H
});
</script>

You can also use methods to interact with the QR code:

qrCode.clear() // clear the code
qrCode.makeCode('https://docs.stacksjs.org') // create another code

Barcode

A lightweight Barcode library with zero dependencies. It supports multiple barcode formats and works in browsers and with Node.js & Bun.

Supported Formats

• CODE128
  • CODE128 (automatic mode switching)
  • CODE128 A/B/C (force mode)
• EAN
  • EAN-13
  • EAN-8
  • EAN-5
  • EAN-2
  • UPC (A)
  • UPC (E)
• CODE39
• ITF
  • ITF
  • ITF-14
• MSI
  • MSI10
  • MSI11
  • MSI1010
  • MSI1110
• Pharmacode
• Codabar

Browser Example

<svg id="barcode"></svg>
<!-- or -->
<canvas id="barcode"></canvas>
<!-- or -->
<img id="barcode"/>

Simple example

Barcode('#barcode', 'Hi!')

Example with options

Barcode('#barcode', '1234', {
  format: 'pharmacode',
  lineColor: '#0aa',
  width: 4,
  height: 40,
  displayValue: false
})

More advanced use case

Barcode('#barcode')
  .options({ font: 'OCR-B' }) // Will affect all barcodes
  .EAN13('1234567890128', { fontSize: 18, textMargin: 0 })
  .blank(20) // Create space between the barcodes
  .EAN5('12345', { height: 85, textPosition: 'top', fontSize: 16, marginTop: 15 })
  .render()

Or define the value and options in the HTML element

Use any barcode-* or data-* as attributes where * is any option.

<svg class="barcode"
  barcode-format="upc"
  barcode-value="123456789012"
  barcode-text-margin="0"
  barcode-font-options="bold">
</svg>

And then initialize it with:

Barcode('.barcode').init()

Retrieve the barcode values so you can render it any way you'd like

Pass in an object which will be filled with data.

const data = {}
Barcode(data, 'text', { ...options })

data will be filled with a encodings property which has all the needed values. See docs for examples of what data looks like.

Node.js & Bun

---

With canvas

import { Barcode } from '@stacksjs/qrx'
import { createCanvas } from 'canvas'

const canvas = createCanvas()

Barcode(canvas, 'Hello')

// As this is a node-canvas, you can configure it as you like:
// see https://github.com/Automattic/node-canvas for more information

With svg

import { DOMImplementation, XMLSerializer } from 'xmldom'

const xmlSerializer = new XMLSerializer()
const document = new DOMImplementation().createDocument('http://www.w3.org/1999/xhtml', 'html', null)
const svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg')

Barcode(svgNode, 'test', {
  xmlDocument: document,
})

const svgText = xmlSerializer.serializeToString(svgNode)

Options

For information about how to use the options, see the docs.

Option	Default value	Type
format	"auto" (CODE128)	String
width	2	Number
height	100	Number
displayValue	true	Boolean
text	undefined	String
fontOptions	""	String
font	"monospace"	String
textAlign	"center"	String
textPosition	"bottom"	String
textMargin	2	Number
fontSize	20	Number
background	"#ffffff"	String (CSS color)
lineColor	"#000000"	String (CSS color)
margin	10	Number
marginTop	undefined	Number
marginBottom	undefined	Number
marginLeft	undefined	Number
marginRight	undefined	Number
valid	function(valid){}	Function

Testing

bun test

Changelog

Please see our releases page for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discussions on GitHub

For casual chit-chat with others using this package:

Join the Stacks Discord Server

Postcardware

Stacks OSS will always stay open-sourced, and we will always love to receive postcards from wherever Stacks is used! And we also publish them on our website. Thank you, Spatie.

Our address: Stacks.js, 12665 Village Ln #2306, Playa Vista, CA 90094, United States 🌎

Sponsors

We would like to extend our thanks to the following sponsors for funding Stacks development. If you are interested in becoming a sponsor, please reach out to us.

• JetBrains
• The Solana Foundation

Credit

Many thanks for the libraries that laid the groundwork:

• QRCode.js: https://github.com/davidshimjs/qrcodejs
• JsBarcode: https://github.com/lindell/JsBarcode

License

The MIT License (MIT). Please see LICENSE for more information.

Made with 💙