react-qrcodes

React hooks for generating QR code.

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

Live Demo

🔧 Install

react-qrcodes is available on npm. It can be installed with the following command:

npm install react-qrcodes --save

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

yarn add react-qrcodes

💡 Canvas

usage

import React from 'react';
import { useQRCode } from 'react-qrcodes';

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

export default App;

parameters

options

💡 Image

usage

import React from 'react';
import { useQRCode } from 'react-qrcodes';

function App() {
  const [inputRef] = useQRCode<HTMLImageElement>({
    text: 'https://github.com/bunlong/react-qrcodes',
    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

options

💖 Wrap Up

If you think any of the react-qrcodes 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 react-qrcodes 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

⚖️ License

The MIT License