stacksjs/qrxPublic

NotificationsYou must be signed in to change notification settings
Fork0
Star8

🔒 QR & Bar Code generating & reading. Lightweight & powerful.

License

MIT license

8 stars 0 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 79 Commits
.cursor/rules		.cursor/rules
.github		.github
.vscode		.vscode
.zed		.zed
docs		docs
packages		packages
test		test
.editorconfig		.editorconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE.md		LICENSE.md
README.md		README.md
bun.lock		bun.lock
bunfig.toml		bunfig.toml
eslint.config.ts		eslint.config.ts
package.json		package.json
pkgx.yaml		pkgx.yaml
qrx		qrx
tsconfig.json		tsconfig.json

Repository files navigation

qrx

A QR & Barcode Library & CLI for Node.js/Bun/Browser.

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 qrxbun add qrxyarn add qrxpnpm add qrx

Check out the package.json scripts for more commands.

Usage

QR Code

<divid="qr-code"></div><scripttype="text/javascript">newQRCode(document.getElementById("qr-code"),"https://stacksjs.org");</script>

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

<divid="qr-code"></div><scripttype="text/javascript">constoptions={width:2,height:100,format:'auto',displayValue:true,fontOptions:'',font:'monospace',text:undefined,textAlign:'center',textPosition:'bottom',textMargin:2,fontSize:20,background:'#ffffff',lineColor:'#000000',margin:10,marginTop:undefined,marginBottom:undefined,marginLeft:undefined,marginRight:undefined,valid(){},}varqrCode=newQRCode(document.getElementById("qr-code"),options);</script>

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

qrCode.clear()// clear the codeqrCode.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 withNode.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

<svgid="barcode"></svg><!-- or --><canvasid="barcode"></canvas><!-- or --><imgid="barcode"/>

Simple example

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

Example with options

import{barcode}from'@stacksjs/qrx'barcode('#barcode','1234',{format:'pharmacode',lineColor:'#0aa',width:4,height:40,displayValue:false})

More advanced use case

import{barcode}from'@stacksjs/qrx'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 anybarcode-* ordata-* as attributes where* is any option.

<svgclass="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.

constdata={}barcode(data,'text',{ ...options})

data will be filled with aencodings 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'constcanvas=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'constxmlSerializer=newXMLSerializer()constdocument=newDOMImplementation().createDocument('http://www.w3.org/1999/xhtml','html',null)constsvgNode=document.createElementNS('http://www.w3.org/2000/svg','svg')Barcode(svgNode,'test',{xmlDocument:document,})constsvgText=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

buntest

Changelog

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

Contributing

Please seeCONTRIBUTING 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

“Software that is free, but hopes for a postcard.” We love receiving postcards from around the world showing whereqrx is being used! We showcase them on our website too.

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