@qr-x/solid v1.1.1

Installation

npm install @qr-x/solid

Usage

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

Solid

import QRX from '@qr-x/solid'

function App() {
  return <QRX data='https://qr-x.devtrice.dev' color='#0284c7' />
}

Gradient

Linear Gradient

import QRX from '@qr-x/solid'

function App() {
  return <QRX data='https://qr-x.devtrice.dev' gradient={{ colors: ['#f97316', '#f59e0b', '#facc15'] }} />
}

Radial Gradient

import QRX from '@qr-x/solid'

function App() {
  return <QRX data='https://qr-x.devtrice.dev' gradient={{ type: 'radial', colors: ['#f97316', '#f59e0b', '#facc15'] }} />
}

Fill Image

import QRX from '@qr-x/solid'

function App() {
  return <QRX data='https://qr-x.devtrice.dev' fillImage='https://images.unsplash.com/photo-1682687218608-5e2522b04673' />
}

Brand

Brand Image

import QRX from '@qr-x/solid'

function App() {
  return (
    <QRX
      data='qr-x.devtrice.dev'
      brand={{
        src: 'https://images.unsplash.com/photo-1682687218608-5e2522b04673',
        style: { width: '4rem', height: '4rem' },
      }}
    />
  )
}

Brand Component

import QRX from '@qr-x/solid'

function App() {
  return (
    <QRX
      data='qr-x.devtrice.dev'
      brand={
        <video
          src='https://videos.pexels.com/video-files/8333185/8333185-hd_1080_1080_30fps.mp4'
          style={{ width: '2.5rem', height: '2.5rem', border: '2px solid white', 'border-radius': '50%' }}
          muted
          autoplay
        />
      }
    />
  )
}

Props