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

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

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

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,
        level: 'M',
        margin: 3,
        scale: 4,
        width: 200,
        color: {
          dark: '#010599FF',
          light: '#FFBF60FF',
        },
      }}
    />
  );
}

export default App;

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,
        level: 'M',
        margin: 3,
        scale: 4,
        width: 200,
        color: {
          dark: '#010599FF',
          light: '#FFBF60FF',
        },
      }}
    />
  );
}

export default App;

Latest version 2.0.0 (2022-02-02):

• Improve code performance
• Rewrite any existing hooks

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

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.

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

Bunlong

Michael Desa

Jared Scheib

You maybe interested.

• React Patterns – React patterns & techniques to use in development for React Developer.
• React Patterns Blog – The latest React news and articles.
• React Papaparse – The fastest in-browser CSV (or delimited text) parser for React.
• Next Share – Social media share buttons for your next React apps.

The MIT License