QR Code
A string drawn as a QR code with tectra's own encoder — no dependency. Dots and corner eyes in several shapes, colours and gradients, a logo in the middle, download as PNG or SVG.
A block from @tectra-ng/blocks — it comes with tectra-ng, or alone: npm install @tectra-ng/blocks @tectra-ng/qr.
The engine is its own package, @tectra-ng/qr: plain TypeScript with no dependencies, so the same codes can be made in any framework, in Node or on the server — npm install @tectra-ng/qr.
Basic
data is all it needs; size (200 px) and margin (1 module) set the box. Scan it with a phone.
Designer
Every option at once: shapes of the dots and the eyes, colours and a gradient, the error correction, the quiet zone and a logo — then download the result as PNG or SVG.
Styles
dotStyle shapes the dots; eyeFrameStyle and eyeBallStyle shape the ring and the centre of the three corner eyes, mixed freely.
Colors
color, background, eyeColor and eyeBallColor, or a linear or radial gradient across the whole code. Keep the dots darker than the background so every scanner reads it.
Logo
logo puts an image in the middle and clears the dots under it; the error correction goes up to H so the code still reads. logoSize is a share of the code, logoMargin the empty modules around it.
Download
download('png' | 'svg', fileName) saves the code — PNG at 1024 px by default — and toSvgString() gives a standalone SVG with the colours resolved. Here the code is Wi-Fi details: a phone offers to join the network.
Plain svg
qrToSvg(text, options) from @tectra-ng/qr returns a finished SVG string — no component, no framework. Put it in a page, an e-mail or a PDF, or write it to a file on the server; qrToPng gives a PNG in the browser.
Design tokens
dt changes the tokens of one code: here primary dots, a wider quiet zone and rounder corners.