Qr Code

import { QRCode, encodeQr } from '@hanzo/ui'

export function Default() {
  return <QRCode value="https://ui.hanzo.ai" />
}

export function Sizes() {
  return (
    <XStack gap="$4" items="center">
      {[96, 160, 224].map((size) => (
        <QRCode key={size} value="https://ui.hanzo.ai" size={size} />
      ))}
    </XStack>
  )
}

export function ErrorCorrection() {
  return (
    <XStack gap="$4" items="center" flexWrap="wrap">
      {(['L', 'M', 'Q', 'H'] as const).map((level) => (
        <YStack key={level} gap="$2" items="center">
          <QRCode value="https://ui.hanzo.ai" size={120} level={level} />
          <SizableText size="$2" color="$quiet">
            {level}
          </SizableText>
        </YStack>
      ))}
    </XStack>
  )
}

export function Styled() {
  return <QRCode value="https://ui.hanzo.ai" fgColor="#7000FF" bgColor="#F4EEFF" includeMargin size={200} />
}

Types

export type QRCodeLevel = 'L' | 'M' | 'Q' | 'H'

export type QRCodeImageSettings = {
  src: string
  height: number
  width: number
  excavate?: boolean
  x?: number
  y?: number
}

export type QRCodeProps = React.ComponentProps<'div'> & {
  /** The text or URL to encode. */
  value: string
  /** Rendered pixel size, square. */
  size?: number
  /** Error-correction level: L (~7%), M (~15%), Q (~25%), H (~30%). */
  level?: QRCodeLevel
  bgColor?: string
  fgColor?: string
  /** Adds a 4-module quiet zone around the code. */
  includeMargin?: boolean
  /** An optional logo overlaid at the center. */
  imageSettings?: QRCodeImageSettings
}

Exports