Generating a QR code with React hooks and JavaScript
Tags: javascript, react, security, tutorial
Published: 2020-05-04 16:39:12

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

### Screenshot

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oqjb3wtfagk6kmsv5tc1.png)

### QRCode function component example

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

Example JavaScript:
```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](https://reactjs.org/docs/components-and-props.html).  `QRCode` accepts two props. 

1. text
1. 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:
* [React](https://cdnjs.com/libraries/react)
* [ReactDOM](https://cdnjs.com/libraries/react-dom)
* [QRious](https://cdnjs.com/libraries/qrious)

[unpkg](https://unpkg.com/) is reliable. I love it. [cdnjs](https://cdnjs.com) is unstoppable! I love it too. Thanks [Cloudflare](https://www.cloudflare.com/)!

### Example

A single html file example.

```html
<!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.