index.tsx raw

   1  import QRCodeStyling from 'qr-code-styling'
   2  import { useEffect, useRef } from 'react'
   3  import iconImg from '../../assets/smeshicondark.png'
   4  
   5  export default function QrCode({ value, size = 180 }: { value: string; size?: number }) {
   6    const ref = useRef<HTMLDivElement>(null)
   7  
   8    useEffect(() => {
   9      setTimeout(() => {
  10        const pixelRatio = window.devicePixelRatio || 2
  11  
  12        const qrCode = new QRCodeStyling({
  13          qrOptions: {
  14            errorCorrectionLevel: 'M'
  15          },
  16          image: iconImg,
  17          width: size * pixelRatio,
  18          height: size * pixelRatio,
  19          data: value,
  20          dotsOptions: {
  21            type: 'extra-rounded'
  22          },
  23          cornersDotOptions: {
  24            type: 'extra-rounded'
  25          },
  26          cornersSquareOptions: {
  27            type: 'extra-rounded'
  28          }
  29        })
  30  
  31        if (ref.current) {
  32          ref.current.innerHTML = ''
  33          qrCode.append(ref.current)
  34          const canvas = ref.current.querySelector('canvas')
  35          if (canvas) {
  36            canvas.style.width = `${size}px`
  37            canvas.style.height = `${size}px`
  38            canvas.style.maxWidth = '100%'
  39            canvas.style.height = 'auto'
  40          }
  41        }
  42      }, 0)
  43  
  44      return () => {
  45        if (ref.current) ref.current.innerHTML = ''
  46      }
  47    }, [value, size])
  48  
  49    return (
  50      <div className="rounded-2xl overflow-hidden p-2 bg-white">
  51        <div ref={ref} />
  52      </div>
  53    )
  54  }
  55