Package Exports

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 Background

import QRX from '@qr-x/react'

function App() {
  return <QRX data='Helloworld' color='#0284c7' />
}

Gradient Background

Linear Gradient

import QRX from '@qr-x/react'

function App() {
  return <QRX data='Helloworld' gradient={{ colors: ['#0ea5e9', '#a3e635', '#34d399'] }} />
}

Radial Gradient

import QRX from '@qr-x/react'

function App() {
  return <QRX data='Helloworld' gradient={{ type: 'radial', colors: ['#0ea5e9', '#a3e635', '#34d399'] }} />
}

Image Background

import QRX from '@qr-x/react'

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

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`