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
}

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

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.