useQRCode
Canvas

๐Ÿ’ก Canvas

๐Ÿ‘จโ€๐Ÿ’ป Code

import React from 'react'
import { useQRCode } from 'next-qrcode'
 
function App() {
  const { Canvas } = useQRCode()
 
  return (
    <Canvas
      text={'https://github.com/bunlong/next-qrcode'}
      options={{
        type: 'image/jpeg',
        quality: 0.3,
        errorCorrectionLevel: 'M',
        margin: 3,
        scale: 4,
        width: 200,
        color: {
          dark: '#010599FF',
          light: '#FFBF60FF',
        },
      }}
    />
  )
}
 
export default App

๐Ÿ“– Props

PropTypeRequireDescription
textstringโœ”๏ธText/URL to encode.
optionsoptionsโŒQR code options.

๐Ÿ“š Options

PropTypeDefaultRequireDescription
errorCorrectionLevelstringMโŒCorrection level. Possible values are low, medium, quartile, high or L, M, Q, H.
marginnumber4โŒDefine how much wide the quiet zone should be.
scalenumber4โŒScale factor. A value of 1 means 1px per modules (black dots).
widthnumber4โŒForces a specific width for the output image. If width is too small to contain the qr symbol, this option will be ignored. Takes precedence over scale.
color.darkstring#000000ffโŒColor of dark module. Value must be in hex format (RGBA). Note: dark color should always be darker than color.light.
color.lightstring#ffffffffโŒColor of light module. Value must be in hex format (RGBA).