@qr-x/vanilla v1.1.1

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