Generating a QR code with React hooks and JavaScript

A single react function component can place an image like a QR code in a HTML5 canvas tag.

Screenshot

QRCode function component example

Here's how to do this without Kubernetes. This example is just JavaScript.

Example JavaScript:

const QRCode = ({text, size}) => {
  const canvas = useRef(null);
  useEffect(() => {
    if (canvas != null && canvas.current != null) {
      let qr = new QRious({
        element: canvas.current,
          value: text,
          size: size
      });
    }
  });
  return(<canvas ref={canvas}></canvas>);
}

Props

QRCode is a function component. QRCode accepts two props.

text
size

The generated QR code image encodes the text. Size controls the image size.

React hooks in this function component

The function component uses exactly two hooks:

useRef
useEffect

useRef() is an essential react hook. It's almost impossible for a React function component to draw on an HTML5 <canvas> without this hook.

useEffect() helps the function component by listening to React component lifecycle events.

Dependencies

Include the cdn hosted versions as <script/> tags:

unpkg is reliable. I love it. cdnjs is unstoppable! I love it too. Thanks Cloudflare!

Example

A single html file example.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>QRCode with React Hooks and JS</title>
    <meta charset="utf-8" />
    <meta name="description" content="QRCode with React Hooks and JS.">
    <meta name="keywords" content="JavaScript, React">    
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
    <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/qrious@latest/dist/qrious.min.js"></script> 
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

// React Hooks
const {
  useRef,
  useEffect
} = React;

// QRCode
//
// Function component, creates one QR code image    
const QRCode = ({text, size}) => {
  const canvas = useRef(null);
  useEffect(() => {
    if (canvas != null && canvas.current != null) {
      let qr = new QRious({
        element: canvas.current,
          value: text,
          size: size
      });
    }
  });
  return(<canvas ref={canvas}></canvas>);
}

// App
//
const App = () => {
  const text = "https://dev.to";
  return(<div align="center">
  <h1>One QRCode</h1>
  <QRCode text={text} size="100"/>
  <p>{text}</p>     
  </div>);
}

ReactDOM.render(
  <App />,
  document.querySelector('#root'),
);
    </script>
  </body>
</html>

Just one way

There are dozens of ways to generate a single QR code image. I'm writing down a list. Please feel free to share the best libraries as a comment.

Blog