@qr-x/react

Installation

npm install @qr-x/react

Usage

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

Solid

import QRX from '@qr-x/react'

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

Gradient

Linear Gradient

import QRX from '@qr-x/react'

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

Radial Gradient

import QRX from '@qr-x/react'

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

Fill Image

import QRX from '@qr-x/react'

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/react'

function App() {
  return (
    <QRX
      data='https://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/react'

function App() {
  return (
    <QRX
      data='https://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', borderRadius: '50%' }}
          muted
          autoPlay
        />
      }
    />
  )
}

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	ComponentProps<'img'> | ReactNode