next-qrcode

next-qrcode

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

Features

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

Live Demo

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 --save

Canvas

Usage

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

function App() {
  const { Canvas } = useQRCode();

  return (
    <Canvas
      text={'https://github.com/bunlong/next-qrcode'}
      options={{
        errorCorrectionLevel: 'M',
        margin: 3,
        scale: 4,
        width: 200,
        color: {
          dark: '#010599FF',
          light: '#FFBF60FF',
        },
      }}
    />
  );
}

export default App;

Canvas props

Prop	Type	Require	Description
text	string		Text/URL to encode.
options	options		QR code options.
logo	logo		QR code logo.

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).

logo

Prop	Type	Require	Description
src	string		The path to the image.
options	options		Logo options.

options

Prop	Type	Default	Require	Description
width	number			Logo dimension.
x	number			If none or undefined, will center.
y	number			If none or undefined, will center.

SVG

Usage

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

function App() {
  const { SVG } = useQRCode();

  return (
    <SVG
      text={'https://github.com/bunlong/next-qrcode'}
      options={{
        margin: 2,
        width: 200,
        color: {
          dark: '#010599FF',
          light: '#FFBF60FF',
        },
      }}
    />
  );
}

export default App;

SVG props

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

options

Prop	Type	Default	Require	Description
margin	number	4		Define how much wide the quiet zone should be.
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 { Image } = useQRCode();

  return (
    <Image
      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;

Image props

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.
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).

Changelog

Latest version 2.5.1 (2023-08-01):

• Upgrade QRCode options API

Details changes for each release are documented in the CHANGELOG.md.

Issues

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.

Contribution

We'd love to have your helping hand on contributions to next-qrcode by forking and sending a pull request!

Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)

How to contribute:

• Open pull request with improvements
• Discuss ideas in issues
• Spread the word
• Reach out with any feedback

Contributors

Bunlong

Michael Desa

Jared Scheib

Mehrdad MotaghiFar

Advertisement

You maybe interested.

• React Patterns – React patterns & techniques to use in development for React Developer.
• React Papaparse – The fastest in-browser CSV (or delimited text) parser for React.
• Next Share – Social media share buttons for your next React apps.
• Next Time Ago – A lightweight tiny time-ago component for your next React apps.

License

The MIT License