Package Exports

@qr-x/vanilla
@qr-x/vanilla/dist/index.cjs.js
@qr-x/vanilla/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@qr-x/vanilla) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Installation

npm install @qr-x/vanilla

Usage

You can also try QR-X in action here or follow the examples below.

Solid Background

import createQRX from "@qr-x/vanilla"

const qrx = createQRX({
  data: 'https://qrx.vercel.app',
  color: '#0284c7',
  shapes: { 
    body: 'square', 
    eyeball: 'square', 
    eyeframe: 'square' 
  },
})

const qrContainer = document.getElementById('qr-container')
qrContainer.innerHTML = qrx

Gradient Background

Linear Gradient

import createQRX from "@qr-x/vanilla"

const qrx = createQRX({
  data: 'https://qrx.vercel.app',
  gradient: {
    colors: ['#0ea5e9', '#a3e635', '#34d399'] 
  },
})

const qrContainer = document.getElementById('qr-container')
qrContainer.innerHTML = qrx

Radial Gradient

import createQRX from "@qr-x/vanilla"

const qrx = createQRX({
  data: 'https://qrx.vercel.app',
  gradient: {
    type: 'radial', 
    colors: ['#0ea5e9', '#a3e635', '#34d399'] 
  }
})

const qrContainer = document.getElementById('qr-container')
qrContainer.innerHTML = qrx

Image Background

import createQRX from "@qr-x/vanilla"

const qrx = createQRX({
  data: 'https://qrx.vercel.app',
  fillImage: 'https://images.unsplash.com/photo-1682687218608-5e2522b04673'
})

const qrContainer = document.getElementById('qr-container')
qrContainer.innerHTML = qrx

Props

Name	Type	Default
data	`string`
level	`'L' \| 'M' \|'Q' \| 'H'`	`'L'`
shapes.body	`'square' \| 'circle' \| 'leaf' \| 'rounded'`	`'square'`
shapes.eyeball	`'square' \| 'circle' \| 'leaf' \| 'rounded'`	`'square'`
shapes.eyeframe	`'square' \| 'circle' \| 'leaf' \| 'rounded'`	`'square'`
gradient.type	`'linear' \| 'radial'`
gradients.colors	`string[] \| {value: string, stop: number}`
gradients.rotate	`number` (This property only exist if gradient.type is 'radial')	`45`
fillImage	`string`