Generate QR Codes in React

QR code (abbreviated from Quick Response code) is a type of matrix barcode (or two-dimensional barcode) first designed in 1994 for the automotive industry in Japan. A barcode is a machine-readable optical label that contains information about the item to which it is attached. In practice, QR codes often contain data for a locator, identifier, or tracker that points to a website or application. A QR code uses four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji) to store data efficiently; extensions may also be used.

Generating QR codes in React has never been easier. There are a few libraries available but the one we will be using in this article is qrcode.react.


Run the following to install qrcode.react in your React project:

$ yarn add qrcode.react

# or, using NPM:
$ npm install --save qrcode.react

Getting Started

Adding a QR code to your React app is just as easy as:

import React from 'react';
import QRCode from "qrcode.react";

export function MyComponent() {
  return (
    <QRCode value="" />

Under the Hood

QRcode.react is basically a React wrapper for the qr.js library. If you’re interested in implement QR codes in JavaScript I would recommend looking into that library as well. It’s very popular and is used by all of the other QR code generating React libraries.


No account yet? Register

Published by Chris London

A serial entrepreneur, Chris is currently co-founder and CTO of tech start-up Cinch. Cinch is an automated marketing platform designed to share the right message at the right time with your customers.

Leave a comment

Your email address will not be published. Required fields are marked *