@deltazero/react-qr-svg

react-qr-svg

React component for rendering SVG QR codes

Demo

Basic demo can be found at the demo page.

Why SVG?

Most of the existing React components for QR (namely qrcode.react, which was used as a starting point for this project) use <canvas> for rendering.

This is fine for most scenarios, however when trying to print such code, it gets blurry. This is caused by the fact that <canvas> contents get rastered and then scaled in the process resulting in the blurriness.

On the other hand, SVG retains the vector information of its contents and therefore is scaled properly when printed.

Basic Usage

Install using npm:

npm install react-qr-svg --save

Then use in your application like this:

import React from "react";
import { QRCode } from "react-qr-svg";

class Demo extends React.Component {
    render() {
        return (
            <QRCode
                bgColor="#FFFFFF"
                fgColor="#000000"
                level="Q"
                style={{ width: 256 }}
                value="some text"
            />
        );
    }
}

Props

The props available are (shown with default values):

{
    value: '', // The value to encode in the code
    level: 'L', // QR Error correction level
    bgColor: '#FFFFFF', // Color of the bright squares
    fgColor: '#000000', // Color of the dark squares
    cellClassPrefix: '', // Prefix of the CSS classes, if specified, bgColor and fgColor are ignored
    transparent: false, // Transparent SVG omitting dark sqaures
    rectProps: {}, // Props passed to <rect> elements, like { rx: 1 } for round rectangles 
}

The level prop corresponds to Error correction level so the valid values are L, M, Q and H.

You can also specify all the props that are valid for the <svg> React element (e.g. style, className or width which you can use to specify the size of the QR code).

Also, you may opt-in for transparency. This option omits dark squares, saves DOM about 30-50% of it's nodes and makes the SVG single color over transparent background. Using this, fgColor is applied on the whole <svg> instead of every <rect>.

CSS styling

You can use CSS to set the QR code colors instead of the bgColor and fgColor props. You just need to specify the cellClassPrefix prop and three CSS classes will become available for you to style.

Let's say you used my-qr-code as the cellClassPrefix. The generated classes are:

• my-qr-code-cell for all the cells
• my-qr-code-cell-empty for the empty cells
• my-qr-code-cell-filled for the filled cells

You can then set the colors using the fill CSS property. See CSS Demo for an example.

Note: If you specify cellClassPrefix, bgColor and fgColor values are ignored.

Acknowledgements

This project is heavily inspired by the qrcode.react project.

This project uses the react-component-boilerplate.

License

react-qr-svg is available under MIT. See LICENSE for more details.