next-qrcode

React hooks for generating QR code for your next React apps.

View Demo View Github

? Features

  • Render as Canvas & Image
  • Support Numeric, Alphanumeric, Kanji and Byte mode
  • Support Japanese, Chinese, Greek and Cyrillic characters
  • Support multibyte characters (like emojis smile)

? Install

next-qrcode is available on npm. It can be installed with the following command:

npm install next-qrcode --save

next-qrcode is available on yarn as well. It can be installed with the following command:

yarn add next-qrcode

? Canvas

usage

import React from 'react';
import { useQRCode } from 'next-qrcode';

function App() {
  const { inputRef } = useQRCode<HTMLCanvasElement>({
    text: 'https://github.com/bunlong/next-qrcode',
    options: {
      level: 'M',
      margin: 7,
      scale: 1,
      width: 200,
      color: {
        dark: '#010599FF',
        light: '#FFBF60FF',
      },
    },
  });
  
  return <canvas ref={inputRef} />;
};

export default App;

parameters

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

options

Prop Type Default Require Description
level 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).

? Image

usage

import React from 'react';
import { useQRCode } from 'next-qrcode';

function App() {
  const { inputRef } = useQRCode<HTMLImageElement>({
    text: 'https://github.com/bunlong/next-qrcode',
    options: {
      type: 'image/jpeg',
      quality: 0.3,
      level: 'M',
      margin: 3,
      scale: 4,
      width: 200,
      color: {
        dark: '#010599FF',
        light: '#FFBF60FF',
      },
    },
  });
  
  return <img ref={inputRef} />;
};

export default App;

parameters

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

options

Prop Type Default Require Description
type string (image/png, image/jpeg, image/webp) image/png ❌ Image format.
quality number 0.92 ❌ A Number between 0 and 1 indicating image quality if the type is image/jpeg or image/webp.
level 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).

? Wrap Up

If you think any of the next-qrcode can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.