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

import createQRX from '@qr-x/vanilla'

const qrx = createQRX({
  data: 'https://qr-x.devtrice.dev/',
  color: '#0284c7',
  shapes: {
    body: 'square',
    eyeball: 'square',
    eyeframe: 'square',
  },
})

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

Gradient

Linear Gradient

import createQRX from '@qr-x/vanilla'

const qrx = createQRX({
  data: 'https://qr-x.devtrice.dev/',
  gradient: {
    colors: ['#f97316', '#f59e0b', '#facc15'],
  },
})

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

Radial Gradient

import createQRX from '@qr-x/vanilla'

const qrx = createQRX({
  data: 'https://qr-x.devtrice.dev/',
  gradient: {
    type: 'radial',
    colors: ['#f97316', '#f59e0b', '#facc15'],
  },
})

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

Fill Image

import createQRX from '@qr-x/vanilla'

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

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

Brand

Brand Image

import createQRX from '@qr-x/vanilla'

const qrx = createQRX({
  data: 'https://qr-x.devtrice.dev/',
  brand: {
    src: 'https://images.unsplash.com/photo-1682687218608-5e2522b04673',
    style: { width: '4rem', height: '4rem' },
  },
})

Brand Component

import createQRX from '@qr-x/vanilla'

const vid = document.createElement('video')

vid.src = 'https://videos.pexels.com/video-files/8333185/8333185-hd_1080_1080_30fps.mp4'
vid.muted = true
vid.autoplay = true
vid.style.width = '2.5rem'
vid.style.height = '2.5rem'
vid.style.border = '2px solid white'
vid.style.borderRadius = '50%'

const qrx = createQRX({
  data: 'https://qr-x.devtrice.dev/',
  brand: vid,
})

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`
brand	HTML Img Attributes \| `Element`