Bunlong / next-qrcode

React hooks for generating QRCode for your next React apps.

Home Page:https://next-qrcode.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

next-qrcode

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

downloads downloads

NPM npm bundle size JavaScript Style Guide

🎁 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
Bunlong
Michael Desa
Michael Desa
Jared Scheib
Jared Scheib
Mehrdad MotaghiFar
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 License: MIT

About

React hooks for generating QRCode for your next React apps.

https://next-qrcode.js.org

License:MIT License


Languages

Language:TypeScript 45.1%Language:JavaScript 39.0%Language:HTML 13.1%Language:CSS 2.8%