💡 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

Prop	Type	Require	Description
text	string	✔️	Text/URL to encode.
options	options	❌	QR code options.

📚 Options

Prop	Type	Default	Require	Description
errorCorrectionLevel	string	`M`	❌	Correction level. Possible values are `low`, `medium`, `quartile`, `high` or `L`, `M`, `Q`, `H`.
margin	number	`4`	❌	Define how much wide the quiet zone should be.
scale	number	`4`	❌	Scale factor. A value of `1` means 1px per modules (black dots).
width	number	`4`	❌	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.dark	string	`#000000ff`	❌	Color of dark module. Value must be in hex format (RGBA). Note: dark color should always be darker than `color.light`.
color.light	string	`#ffffffff`	❌	Color of light module. Value must be in hex format (RGBA).

Introduction SVG