Package Exports

@qr-x/react
@qr-x/react/dist/index.cjs.js
@qr-x/react/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/react) 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/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' \| 'diamond' \| 'triangle' \| 'heart'`	`'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`